HTML&CSS字体之引入外部字体

首先，罗列下CSS中常用的字体属性：

body {
  font-family: Arial, Helvetica, sans-serif; 
  font-weight:normal;
  font-style:italic;
  font-size:1rem;
  color:#111;
}

font-family中列出的是几乎适用于所有计算机的网络安全字体，如：Arial/Helvetica/Georgia/Times New Roman等。

但是如果想要一些特别的字体，可以从外部网站中找到并下载，然后在代码中引入。

以下是一些获取字体的网站：

1. fontsquirrel.com
2. fonts.com
3. my fonts.com

首先需要在网站上挑选合适的字体并下载到本地，这里我选用了一种很火的免费字体：opensans，在fontsquirrel.com中找到并下载。

字体文件有许多格式，如TTF/OTF/EOT/WOFF/WOFF2.0，对于网页，最好使用WOFF/WOFF2.0，因为这些字体压缩性高，利于传输和加载。

刚刚从网站上下载的字体是TTL格式，需要将其转换为WOFF格式。回到fontsquirrel.com，点击“Generator”，将需要转换的文件上传，等待转换结束后，下载转换好的文件到本地。

将下载好的WOFF和WOFF2格式的字体文件导入项目中，并打开附带的stylesheet.css，这里定义了注册字体文件的规则。将这个文件中的内容复制到项目css文件的顶部（放顶部是因为先注册才能使用字体）并将URL改成字体文件的相对路径。

@font-face {
  font-family: "opensans";
  src: url("fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
    url("fonts/open-sans/opensans-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "opensans";
  src: url("fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
    url("fonts/open-sans/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

这样，就可以在CSS文件中使用这种字体了。

p {
  font-family: "opensans",Arial, Helvetica, sans-serif;
}

但是使用这种外部引入的字体时，会遇到一个问题，加载网页时，需要先下载字体，如果网速很慢时，字体可能需要等一会儿才下载好，那么在这段时间，网页上显示的文字字体是备用字体。比如，按照上面的font-family的设置，当浏览器下载"opensans"时，它会先显示Arial或Helvetica。当下载完成时，会变成“opensans”，这就是：Flash of Unstyled Text，即无样式文字闪现。这可能会引起排版的变化或元素的移动。

有一些技巧可以削弱这种影响，但其实无法根除。可以在@font-face中加入font-display属性告诉浏览器如何处理此类问题：

@font-face {
		......
  font-display: fallback;
   /* 告诉浏览器，有很短的窗口期可以下载自定义字体，如果在此期间没有完成下载，浏览器就一直使用备用字体。/*
}

再介绍一种通过连接引入外部字体的方式：字体服务，有一些网站提供字体服务，如：

1. fonts.google.com
2. fonts.adobe.com
3. fonts.com
4. fontdect.com

打开fonts.google.com，选出想要的字体
选择完毕后，复制链接代码，粘贴到.html的head部分title之下即可。