文字05 自定义字体

自定义字体

CSS3引入的@font-face，让我们为我们的文本引入自定义字体，指定的字体可以从远程服务器或者用户本地安装的字体加载。@font-face规则不仅仅可以使用在CSS的顶层，还可以用在任何CSS条件组规则中。

一般我们使用只需要向下面这样定义就可以：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

除了上面两个数户型，它还有一些列的属性，来指定字体的具体属性，可以参考MDN的文档。

字体类型

常见的字体类型有以下几种：

• .ttf：True Type，是Windows和Mac系统最常用的字体格式，它可以任意缩放和旋转不会出现锯齿
• .otf：Open Type，是可缩放性的电脑字体类型，是微软与Adobe共同开发用来替代TrueType的新字形
• .eot：Embedded Open Type，微软开发的嵌入字体格式
• .woff，Web Open Font Format，专门为了We设计的字体格式标准，是对True Type、Open Type等字体格式的封装，并针对网络使用进行了优化
• .svg，Scalable Vector Graphics Fonts，使用SVG来呈现字体（.svgz是使用了Gzip压缩的SVG字体）

目前现代浏览器基本都支持.ttf、otf、woff的字体格式，如果为了保证兼容不同的浏览器，一般会同时指定多个格式

@font-face {
  font-family: 'myFont';
  src: url('myFont.eot'); /* IE9 Compat Modes */
  src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
       url('myFont.woff') format('woff'), /* Modern Browsers */;
}

实际使用

在字体天下这个网站，随便找到了一个字体PangMenZhengDaoQingSongTi-2.otf下载下来，放到本地目录中。

因为字体是我随便下载的，只有otf这种格式。

然后在CSS文件中，首先声明我自定义的字体名和位置：

@font-face {
  font-family: 'Secret Font';
  src: url('../assets/fonts/PangMenZhengDaoQingSongTi-2.otf');
}

然后在一个类中使用自定义字体：