用HTML/CSS缩小文本

Question

我在弄清楚如何使用HTML和CSS来模拟这个图像。它将会显示在留言板上的头像下方。

这是我到目前为止有：https://jsfiddle.net/J7VBV/220/

table.avatarStats { 
    border-spacing: 0; 
    border-collapse: collapse; 
    text-align: center; 
    color: white; 
    font-family: Arial, Helvetica, sans-serif; 
} 

<table class="avatarStats" width="200" border="0"> 
    <tr> 
    <td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td> 
    <td bgcolor="teal">OVERALL<br /><strong>55%</strong></td> 
    </tr> 
    <tr> 
     <td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td> 
    <td bgcolor="teal">OVERALL<br /><strong>1737</strong></td> 
    </tr> 
</table> 

我有减小的数字上面的文字大小的主要问题。我试过的任何东西都是缩小文字。

此外，有没有更好的方式来粗体数字？

Answer 1

您可以使用CSS来缩小字体。

font-size: 10pt; 

只需将10pt替换为您想要使用的任意大小即可。

我会用一个CSS类，如：

.small { 
    font-size: 10pt; 
} 

，并添加

class="small" 

你想成为小

Answer 2

虽然我想有些变化奉劝您的标记文本，添加到您的CSS：

table tr td:last-child{ 
    font-size: 8pt; 
} 

编辑：

我的第一个代码是关闭的。现在它是正确的。这里有一个fiddle

Answer 3

使用此

table.avatarStats { 
 
\t border-spacing: 0; 
 
    \t border-collapse: collapse; 
 
\t text-align: center; 
 
\t color: white; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 
td small{ 
 
    font-size:7pt; 
 
    font-weight:bold; 
 
} 
 
td strong{ 
 
    
 
    font-size:18pt; 
 
    font-weight:bold; 
 
}

<table class="avatarStats" width="200" border="0"> 
 
    <tr> 
 
     <td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td> 
 
    <td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td> 
 
     <td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td> 
 
    </tr> 
 
</table>

Answer 4

你可以这样做。

table.avatarStats { 
 
\t border-spacing: 0; 
 
    \t border-collapse: collapse; 
 
\t text-align: center; 
 
\t color: white; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.cap{ 
 
    font-size:8px; 
 
    font-weight:normal; 
 
} 
 
td{ 
 
    font-weight:bold; 
 
    font-size:22px 
 
}

<table class="avatarStats" width="200" border="0"> 
 
    <tr> 
 
    <td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td> 
 
    <td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td> 
 
     <td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td> 
 
    </tr> 
 
</table>

需要

Answer 5

这里试试这个https://jsfiddle.net/fd9x06jq/

table.avatarStats tr td strong{ 
    font-size:9pt;  
    font-weight:bold; 
    color:black 
} 

Answer 6

更新你的代码作出相应的调整字体大小：https://jsfiddle.net/70gtky65/1/

<table class="avatarStats"> 
    <tr> 
    <td>RECENT WR<br/><span>61%</span></td> 
    <td>OVERALL<br/><span>55%</span></td> 
    </tr> 
    <tr> 
     <td>RECENT WN8<br/><span>2469</span></td> 
     <td>OVERALL<br/><span>1737</span></td> 
    </tr> 
</table> 

<style type="text/css"> 
    table.avatarStats { 
     border-spacing: 0px; 
     text-align: center; 
     color: white; 
     font-family: Arial, Helvetica, sans-serif; 
     width: 108px; 
    } 

    table.avatarStats td { 
     font-size: 7px; 
     width: 50px; 
     padding: 2px; 
    } 

    table.avatarStats td span { 
     font-size: 16px; 
    } 

    table tr td:first-child { 
     background-color: #7842B3; 
    } 

    table tr td:last-child { 
     background-color: #459ABD; 
    } 
</style> 

你应该尽量避免内联CSS和here is why