引入使用外部自定义的字体？

糯米coding
2,346 阅读3分钟

1. 怎么引入使用外部自定义的字体？

产品小姐姐说电脑上自带的字体太丑了，要用酷炫的字体，产品小姐姐都发话了，那我们就只有引入外部的自定义字体咯。

要引用外部的自定义字体，需要使用到CSS3里面的@font-face，通过@font-face 可以使用你喜欢的任意字体。

一般情况下，我们从UI那里拿到的只有一种格式的字体，但是不同浏览器所支持的字体格式又是不一样的，所以我们就需要先将字体进行转换。推荐使用这个网站进行字体转换：https://www.fontsquirrel.com/tools/webfont-generator。

image.png 在项目目录下，新建一个fonts文件夹，将转换后的字体文件复制到这个文件夹，再新建一个font.css文件。

2. 代码怎么写？

在font.css文件中引入字体：

@font-face {
  /* 自定义的字体名字 */
  font-family: 'myCoolFont';
  /*本地的字体地址*/
  src: url('./dsdigi1-webfont.eot'); /* IE9 Compat Modes */
  src: url('./dsdigi1-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
  url('./dsdigi1-webfont.woff') format('woff'), /* Modern Browsers */ 
  url('./dsdigi1-webfont.woff2') format('woff2'), /* Modern Browsers */
  url('./dsdigi1-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
  url('./dsdigi1-webfont.svg#myCoolFont') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

在页面中使用引入的外部字体：

  <link rel="stylesheet" href="../normal/fonts/font.css">
  <style>
    body {
      background: #090822;
    }
    .my-font {
      font-size: 60px;
      font-family: 'myCoolFont'; /*自定义的字体名字*/
      color: #07c6ff;
    }
  </style>
</head>

<body>
  <div class="my-font">9527</div>
</body>

可以在这个网站上去下载需要的字体https://www.fontke.com，上面也可以识别、转换字体。

3. 移动Web开发字体格式选择

.ttf

TrueType，是Type 1(Adobe公司开发)的竞品，由苹果公司和微软一起开发，是mac系统和window系统用的最广泛的字体，一般从网上下载的字体文件都是ttf格式，点击就能安装到系统上。

.otf

OpenType，TrueType是OpenType的前身，90年代微软寻求苹果的GX排版技术授权失败，被逼自创武功取名为TrueType Open，后来随着计算机的发展，排版技术上需要更加具有表现力的字体，Adobe和微软合作开发了一款新的字体糅合了Type 1和TrueType Open的底层技术，取名为OpenType。后来OpenType被ISO组织接受为标准，称之为Open Font Format（off）。

.eot

Embedded Open Type，主要用于早期版本的IE，微软根据OpenType做了压缩，重新取名为Embedded OpenType，是其专有格式，带有版权保护和压缩。ttf和otf字体在web端来说兼容相对较好，除IE和早期的ios safari和Android不怎么支持外，其他浏览器都兼容都不错。但是由于ttf和otf体积过大，在桌面浏览器的时代还可以满足需求，到了移动浏览器的时代，动辄5MB、10MB的字体文件就显得过于庞大了。因此微软在OpenType的基础上进行了优化压缩，相比OpenType大大减少了体积，但是除了IE以外的浏览器都不太支持，因此也没有成为行业标准。

.woff

Web Open Font Format，可以看作是ttf的再封装，加入了压缩和字体来源信息，通常比ttf小40%。在2010年4月8日，Mozilla基金会、Opera软件公司和微软提交WOFF之后，万维网联盟发表评论指，希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的（字体）格式”。2010年7月27日，万维网联盟将WOFF作为工作草案发布。也是当前web字体的主流格式。

image.png

woff字体文件浏览器兼容性

.woff2 Web Open Font Format 2.0，相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下，woff2比woff要小20%到30%。

image.png

woff2字体文件浏览器兼容性

结论

对比总结我们就会发现，尽管 .woff 文件由于历史原因，许多旧设备的浏览器并不支持，但是考虑当前兼容情况和文件大小的优势，在进行移动Web开发时，我们可以优先考虑使用.woff2，如果需要兼容更多的低版本设备，再考虑使用.woff。

avatar
文章
阅读
粉丝