font-face 自定义字体

在项目中遇到特殊的特有字体，用户客户端又并不存在改字体样式，如何进行正确的字体渲染？

今日份前端小白get 经验+1

在项目静态styles中（src/styles）会有一些全局的样式引入，如果遇到特定字体可以通过在静态文件中自定义字体 进行客户端渲染，这就用到了css3 中的 font-face 特性参数。

font-face是css3中允许使⽤⾃定义字体的⼀个模块，他主要是把⾃⼰定义的Web字体嵌⼊到你的⽹页中。

使用方式：

@font-face {
  font-family: '自定义字体1';
  src: url('https://网络路径.ttf')
    format('truetype');
}

参数:

font-family	定义字体的名字			必选
src	字体路径			可选
format	定义字体的格式			可选
font-wight	定义加粗样式			可选
font-style	定义字体样式			可选

参数详解

font-family：为载入的字体定义名称

src： [url] 加载字体，可以是相对路径、绝对路径，也可以是网络地址。

format：定义字体的格式，用来帮助浏览器识别。值为 truetype、opentype、truetype-aat、enbedded-opentype、svg、woff

• WOFF：
  • woff 是web Open Font Format 几个单词首字母简写。这种字体格式专门用于网商，由Mozilla联合其他几大组织共同开发。WOFF字体通常比其他字体加载要快，因为使用了OpenType(OTF) 和 TrueType(TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。现代浏览器都开始支持这种字体格式。
• SVG / SVGZ
  • Scalable Vector Graphics(Font)。 SVG是一种用矢量图格式改进的字体格式。体积上比矢量图更小，适合在手机设备上使用
• EOT
  • Embedded Open Type。这是微软创造的字体格式。这种格式只能IE6-IE8使用。
• OTF / TTF
  • OpenType 和 TrueType 。因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而OpenType 有很多独特的地方，收到很多设计者的喜爱。