10. css3文字与字体相关样式

10.1 给文字添加阴影

说明：给文字添加阴影的基本使用请参考2.2-(5)text-shadow；可设置多重阴影效果

text{
  text-shadow: -10px -10px 1px red,
                10px 10px 3px green,
                25px 25px 1px blue,
                45px 45px 5px yellow;
  color: black;
  font-size: 40px;
  font-weight: bold;
  font-family: 宋体;
}

<view>
  <text>为文字添加阴影</text>
</view>

10.2 使用服务器端字体

@font-face{
  font-family: myfont;
  src: url("服务器端的字体地址")format("truetype");
}

text{
  font-family: myfont;
}

说明：url("")括号内为服务器端的字体地址(字体上传到服务器上，用户在使用时会自动下载下来)。
备注：字体文件拓展名为ttf则src: url()format("truetype");；字体文件拓展名为otf则src: url()format("opentype");。
优化：客户端有Arial字体则直接加载客户端Arial字体，没有则从服务器加载并使用服务器端字体。

@font-face{
  font-family: myfont;
  src: local("Arial"),
       url("服务器端的字体地址");
}

text{
  font-family: myfont;
}

10.3 修改文字种类而保持字体尺寸不变

说明：文字的样式不同字体的大小将会发生变化，可使用 font-size-adjust属性来使字体尺寸不变。

<view>
  <text id='text1'>字体样式1</text>
</view>
<view>
  <text id='text2'>字体样式2</text>
</view>
<view>
  <text id='text3'>字体样式3</text>
</view>

#text1{
  font-family: monospace;
  font-size: 16px;
  font-size-adjust: 0.58;
}
#text2{
  font-family: cursive;
  font-size: 16px;
  font-size-adjust: 0.6;
}
#text3{
  font-family: fantasy;
  font-size: 16px;
  font-size-adjust: 0.78;
}

备注：可通过不断尝试调节font-size-adjust: aspect;中aspect的数值来使各种样式的字体尺寸操持一致；更为精细的aspect数值的获取可通过高度和尺寸计算得出，如：x-height:58 font-size:100px aspect=0.58。浏览器中的计算公式为：c=(a/b)*s，a为实际使用的字体的aspect值，b为修改前字体的aspect值，s为当前字体的尺寸，c为浏览器实际显示的字体尺寸。