text-stroke与文字font-weight字重变细实例页面

回到相关文章 »

效果：

  14px 16px 20px 24px
0.1px 描边 描边 描边 描边
0.2px 描边 描边 描边 描边
0.5px 描边 描边 描边 描边
1px 描边 描边 描边 描边

代码：

CSS代码：
.col1 { font-size: 14px; }
.col2 { font-size: 16px; }
.col3 { font-size: 20px; }
.col4 {  font-size: 24px; }
.row1 { -webkit-text-stroke: .1px #f9f9f9; }
.row2 { -webkit-text-stroke: .2px #f9f9f9; }
.row3 { -webkit-text-stroke: .5px #f9f9f9; }
.row4 { -webkit-text-stroke: 1px #f9f9f9; }
HTML代码：
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">14px</th>
    <th scope="col">16px</th>
    <th scope="col">20px</th>
    <th scope="col">24px</th>
  </tr>
  <tr class="row1">
    <th scope="row">0.1px</th>
    <td class="col1">描边</td>
    <td class="col2">描边</td>
    <td class="col3">描边</td>
    <td class="col4">描边</td>
  </tr>
  <tr class="row2">
    <th scope="row">0.2px</th>
    <td class="col1">描边</td>
    <td class="col2">描边</td>
    <td class="col3">描边</td>
    <td class="col4">描边</td>
  </tr>
  <tr class="row3">
    <th scope="row">0.5px</th>
    <td class="col1">描边</td>
    <td class="col2">描边</td>
    <td class="col3">描边</td>
    <td class="col4">描边</td>
  </tr>
  <tr class="row4">
    <th scope="row">1px</th>
    <td class="col1">描边</td>
    <td class="col2">描边</td>
    <td class="col3">描边</td>
    <td class="col4">描边</td>
  </tr>
</table>