探究|客户端表现一致的关键:@font-face

1,168 阅读3分钟

探究|客户端表现一致的关键:@font-face

【每一个技术点都值得优写】系列2期。

一、前言

我们看到的网页所使用的字体,通常是操作系统默认支持的字体,比如Windows(10/8.1/8/7/Vista) 操作系统的默认字体是 Segoe UI(发音为 see go 这两个单词),早期版本的 Windows,默认字体是 Tahoma,简体中文下则是宋体。事实上,Windows 操作系统的默认字体,是由当前系统用户所在的地区决定的,在操作系统在启动应用程序的时候,会做判断,根据地区设置默认字体。

更高审美要求下,默认字体可能满足不了我们需求,因此我们需要引入一些特殊的字体,尤其是具有艺术性表达的美观字体,这有时会使我们的界面设计获得更大的好高度,带来更好的体验。

字体一致,这是真正保持客户端样式表现一致的关键。

那么,在web前端是如何支持引入外部字体的呢?css的 @font-face 会提供支持。

二、关键技术点介绍

1.@font-face 简介

这是一个叫做 @font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体或加载指定的本地字体。有了 @font-face 的支持,我们可以引入想要的外部字体,从而消除对客户端字体的依赖,这在实现统一字体,统一审美,维持原始设计的完整真实性,保持客户端样式表现一致上有用,否则可能会造成不同客户端展现的字体效果具有差异。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

2.@font-face 的基本用法

@font-face {
    /* 字体名称,可自定义,就像定义一个class名称一样。*/
    font-family: 'hdjx'; 
    /* 字体文件的路径,除了 url()加载字体,也可以通过 local() 加载本地字体 */
    src: url('./HDJXYT.ttf'); 
    /* 字重,就像在普通css中使用它一样,可以选择bold等值 */
    font-weight: normal; // 字重
    /* 字体样式 */
    font-style: normal; // 字体样式
}

@font-face 支持多种字体备选,即是说当加载第一份字体失败时,会往下寻找。

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

3.注意事项

1.这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。

2.因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME,因此不能为这些字体类型设置特定的MIME(实际上WOFF的MIME将会是application/font-woff,但浏览器对此MIME的识别还不统一,其它字体情况也类似,可暂时使用application/octet-stream)。

3.你不能在一个 CSS 选择器中定义 @font-face 。例如,这样写是无效的

.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

本段落摘自 developer.mozilla.org

三、demo 示例

引入外部字体后的效果图

image.png

demo1:html版本

image.png

demo2:vue版本

image.png

四、@font-face 的浏览器兼容性

@font-face 的浏览器兼容良好,chrome4和ie4就支持了,可以放心使用,具体情况如下:

该图来自 developer.mozilla.org

image.png