526互联

前端中字体的使用

发布时间 2023-09-20 22:29:53作者: kongshu

前端中字体的使用

字体是前端的基础，本文介绍常见的几种字体以及如何在工程中引入自定义的字体。

字体的类型

常见的字体类型有 TTF/OTF, WOFF/WOFF2, SVG,EOT （这个是按照浏览器的支持率由高到底排序的）

  • TTF(True Type Font)
    由微软与苹果开发，广泛用于windows/Mac 操作系统，浏览器支持最高的字体，除了IE8,IE9部分支持。缺点是不能压缩，所以体积比较大
  • OTF(Open Type Font)
    是TTF的进化版，也是微软苹果共同开发。浏览器支持比较好
  • WOFF(Web Open Fort Format)
    它本质上是TTF/OTF,但是带有额外的信息，特别是它支持压缩，浏览器支持相对较好。针对web 开发的字体
    WOFF2是WOFF的下一代字体，压缩率比WOFF高，由于不是一个主要的升级，所以浏览器支持没有WOFF高。
  • EOT(Embedded Open Type)
    微软开发的针对网页的字体，只有IE8/9支持。
  • SVG
    苹果开发的字体，只有Safri,Safri mobile 支持。如果要在iphone/ipad 上开发，只有这个字体支持。

总结一下

TTF/OTF, WOFF/WOFF2, 是相对浏览器支持率比较高的字体。如果是iphone/ipad, 那就只能svg, EOT也就是IE8/9 了。

如何在前端中引用字体并保持各个浏览器的兼容

  • 引用字体可以通过css 中的@font-face,代码如下
@font-face{
  font-family:'yourfontname';
  src:url('fontfileurl1') format('fonttype1'),
  rl('fontfileurl2') format('fonttype2');
}

/*然后我们就可以采用上面的youfontname了*/
  • 上半部介绍了字体的类型及支持率，那么如何定义字体才可以取得更好的支持性呢。先看下面这个经典的写法。
    原则上我们想使用的字体是woff2>woff>ttf>svg>eot
src: url("font-file-path.eot");/*这个是为IE7,IE8,准备的它会优先被命中，对于其他的浏览器不支持就跳过了。*/
/*下面这个地方为什么又出现一个src,原因是兼容模式下IE7/IE8对于有问号的src 不能识别，也就是这个src 会被忽略掉，所以第一行也要加src. 这边的url 里面的?#iefix, 是为了避免IE9下的404问题的，其实可以简化成?#, IE9会将?后面的当作参数*/
src: url("eot-font-file-path.eot?#iefix") format("embedded-opentype"),
  url("woff2-font-file-path.woff2") format("woff2"),
  url("woff-font-file-path.woff") format("woff"),
  url("ttf-font-file-path.ttf") format("truetype"),
  url("svg-font-file-path.svg#fontname") format("svg");

上述的写法也可以简化成如下写法

src: url("font-file-path.eot");
src: 
  local('☺'),/*IE9之下是识别不了图形符号的，下面的就自动过滤掉了*/
  url("woff2-font-file-path.woff2") format("woff2"),
  url("woff-font-file-path.woff") format("woff"),
  url("ttf-font-file-path.ttf") format("truetype"),
  url("svg-font-file-path.svg#fontname") format("svg");