CSS3 自定义字体

21 min read

语法规则

@font-face {

  font-family:'YourWebFontName';

  src:url('YourWebFontName.eot');/* IE9 Compat Modes */

  src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */

  url('YourWebFontName.woff')format('woff'),/* Modern Browsers */

  url('YourWebFontName.ttf')format('truetype'),/* Safari, Android, iOS */

  url('YourWebFontName.svg#YourWebFontName')format('svg');/* Legacy iOS */

}
  • font-family: 自定义字体名称
  • src: 本地或者远程的字体资源
  • format: 适应不同系统平台的字体格式
  • weight: 定义字体是否为粗体
  • style主要定义字体样式，如斜体。

获取字体

免费字体提供商: Google Web Fonts

字体的压缩

对于某些特殊字体,可能只需要使用到这个字体当中一部分的符号,如果全部导入将会增加前端代码体积,影响加载的速度,可以使用一些工具对这些字体进行压缩,只保留使用到的字体

http://ecomfe.github.io/fontmin/#source

字体设置

常见的字体的设置,以下为小米官网的字体设置

font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;