'前端引入外部字体'

发表于

前端引入外部字体

  前端字体不美观，如何引用外部字体呢？

字体文件下载

  很多网站都提供字体下载，其实我们需要的只是一个 ttf文件，这个网站可以提供免费的ttf字体文件下载：http://www.downcc.com/font/

格式转换

  不同的浏览器需要不同格式的字体文件，一般我们需要的有 eot svg ttf woff 这几类字体文件来适应不同的浏览器，这里提供一个可以格式转换的网站：https://www.fontke.com/tool/convfont/ 上传我们下载的 ttf文件 后，选择想要的格式，进行转换下载即可。

CSS引入

将下载好的几种格式文件放入我们的项目中（最好建一个文件夹专门用于存放字体），在 CSS 文件中写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*引入外部字体*/

@font-face {
    font-family: "布丁体";
    src: url("../src/font/布丁体.eot"); /* IE9 */
    src: url("../src/font/布丁体.eot?#iefix")
    format("embedded-opentype"),  /* IE6-IE8 */
    url("../src/font/布丁体.woff") format("woff"), /* chrome firefox */

    url("../src/font/布丁体.ttf") format("truetype"), /* chrome firefox opera Safari Android IOS 4.2+ */

    url("../src/font/布丁体.svg#布丁体") format("svg");  /* IOS 4.2- */
    font-style: normal;
    font-weight: normal;
}

注意这里我用的是 “布丁体”，url() 里是我的字体文件在项目中的存放路径，根据自己引入的字体修改字体名字。

使用

1
2
3
.class {
    font-family: '布丁体', serif;
}

serif 是字体引入失败时的备用字体，也可以不添加。

参考文献

  1. http://www.one-net.cc/post/196.html
  2. https://my.oschina.net/Cubicluo/blog/888505
0%