CSS中引入自定义字体

CSS中字体的一些常见用法，以及利用@Font-face规则在网页中使用自定义的字体

经过配置后，实现了在博客中自定义字体的功能，如目前博客标题的效果：

  一般我们在网页中使用的字体通常都是所谓的“安全字体（Web-safe）”，通常指的是Arial、Courier New、Georgia、Times New Roman、Verdana等字体，这些字体因为无论在哪种浏览器的情况下一般都是被支持的，故称为“Web-safe”。这些都是英文字体，在中文的环境下也有一些被认为相对“安全”的字体，如黑体（SimHei）、宋体（SimSun）、仿宋（FangSong）、楷体（KaiTi）、微软雅黑（Microsoft YaHei）等，这些中文字体的名字也是有英文写法的，这里也一并写出。

  这里还有个“通用字体族”的概念，可以指一类字体。其中最常见的是“Sans-serif”和“Serif”，Sans-serif应该是法语，字面意思就是“无衬线”，衬线指的是字符笔划末端出现的横线、斜线或突起等变化，相对的“Serif”就是“（有）衬线字体”。Times New Roman和宋体应该算是Serif中典型的例子，这两个都属于衬线字体；而黑体和Arial就属于Sans-serif，可以发现它们的笔划末端是平直的、没有变化的。其余的通用字体族如等宽字体（Monospace）等在这里不作多述。

  了解了这些字体后，我们就可以声明并引入它们。如这里把元素“title”字体的属性定义为Times New Roman和宋体：

在配置CSS样式的地方声明所使用的字体：

font-family: "Times New Roman", SimSun, 宋体, Sans-serif;

在元素位置处将其引入：

.title
{
	font-family: "Times New Roman", SimSun, 宋体, Sans-serif;
	font-size: 2.5em;
	font-weight: bold; 
	font-style: italic;
	text-align: center;
	line-height: 1em;
	letter-spacing: 2px;
}

这里有几点注意：

1. 声明和引入字体的时候，英文字体放在中文前面，因为优先级是从左往右的，如果中文字体在前且该中文字体对英文字符生效（如宋体），就会让英文字符都首先服从了这个中文字体，后面的Times New Roman就失效了；
2. 如果字体的名字有多个单词（如Times New Roman），最好打上引号，虽然对于多数浏览器来说不打好像也可以，但还是建议打上。单引号和双引号都是可以的；
3. 中文字体是可以直接使用中文的，但还是建议中文名和英文名都写上；
4. 为什么font-family最后都会放一个“Sans-serif”，这是一个保险措施，因为如果前面使用的字体是一些偏门字体或全都没有生效，则最后这个字体族“Sans-serif”一定能以某种方式生效，因为用户的计算机里必定存在这个字体族中的某一个可用字体。这样可以保证字体最终能够显示出来。
5. font的属性：

   font-size控制字体大小，可以用em或px等作单位，1em大概等于16px，用px的话建议避免出现小数点；
   font-weight控制字体的粗细，可以是normal、bold，或100-900之间的整百数值，400相当于normal，700相对于bold。可以看到数值越大就越粗。
   font-style控制字体的样式，也就是说字体是不是斜体，值可以是normal、italic和oblique，italic和oblique都是斜体，区别在于italic应用字体中包含的斜体字符，而oblique只是单纯让正字符倾斜，如果字体文件不包含斜体字符的话，italic就不生效，而只能用obllique。所以一般优先用italic。

  这之后，再来看如何实现一个“自定义”的个性化字体。因为不管宋体还是Arial这些字体都太常见了，搞不出花样，所以这里就有一个@Font-face的规则来让我们引入自选的字体来实现个性化。

用@font-face声明字体的基本写法：

@font-face
{
	font-family: <YourFontsName>;
	src: <url> [<format>],[<source> [<format>]], *;
	[font-weight: <weight>];
    [font-style: <style>];
}

  这其中，font-family后面是要给个性化字体起的名字，这个名字可以自定义。src的url路径可以是相对路径也可以是绝对路径，甚至可以是网址，让它指向字体文件所在的位置就行了。format则是浏览器要识别的字体对应的格式。

  而关键则在于这个字体文件格式上，虽然.ttf是最常见的字体格式，但不同浏览器用的字体文件格式还挺多的，除了truetype(.ttf)之外，还有opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)等，这些其他的格式的用处在这里不作多述，自然是俱备为好。首先我们得搞到字体文件（一般是ttf格式的），然后通过字体格式转换的工具（或网页）将其转换为所需的不同格式。获得这些文件后，将其都放到网页服务器的某一目录里，比如建一个叫font的文件夹。然后就可以在url中指向这个位置了。

本博客的标题logo的@font-face的写法为：

@font-face {
	font-family: 'AphroditeSlimPro'; /* Title flourish */
	src: url('../font/AphroditeSlimPro/AphroditeSlimPro.eot'); /* IE9 */
	src: url('../font/AphroditeSlimPro/AphroditeSlimPro.eot?#iefix') format('embedded-opentype'),
	url('../font/AphroditeSlimPro/AphroditeSlimPro.woff') format('woff'),
	url('../font/AphroditeSlimPro/AphroditeSlimPro.otf') format('otf'),
	url('../font/AphroditeSlimPro/AphroditeSlimPro.ttf') format('truetype'),
	url('../font/AphroditeSlimPro/AphroditeSlimPro.svg#icoAph') format('svg');
}

  博客更新主题后我将字体换成了AphroditeSlimText，加入了font-display: swap的参数，它可以使用后备字体先行加载文本，等字体文件载入完成后再交换为指定的字体。代码基本没有什么变化：

@font-face {
    font-family: "AphroditeSlimText"; /* Title flourish */
    src: url('../fonts/AphroditeSlimText/AphroditeSlimText.eot'); /* IE9 */
    src: url('../fonts/AphroditeSlimText/AphroditeSlimText.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/AphroditeSlimText/AphroditeSlimText.woff') format('woff'),
    url('../fonts/AphroditeSlimText/AphroditeSlimText.otf') format('otf'),
    url('../fonts/AphroditeSlimText/AphroditeSlimText.ttf') format('truetype'),  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/AphroditeSlimText/AphroditeSlimText.svg#icoAph') format('svg');
    font-display: swap;
}

  其中加入的#iefix是为了让url实现特征化以避免IE9版本之前的某些冲突错误，而第一个不带format属性的格式也是为了解决一些兼容问题。至于font-weight等属性，因为我在引入调用的时候已经写了，在声明中就可以忽略掉。这些都完成后，就可以直接在元素中引入AphroditeSlim的字体，结果就如上面的图示。这样因为字体文件实际上已经进入了服务器，我们在系统本身不含有这个字体的设备上查看该网页的时候，也是可以加载出这个字体的。要验证这一点的话可以在虚拟机或者手机端测试一下就行。

  上面还说到，这个url可以调用一个网址，这也就是说字体文件并不是必须在自己的服务器里，也可以放在其他地方，只要它随时可以调用就行，字体也不局限于文字，如本博客中的几个按钮的图标也是通过@font-face来实现的，这通常称为“icon font”，我直接调用了阿里巴巴矢量图标库的图标文件。该图标库的网址为www.iconfont.cn ，它的好处是可以直接生成@font-face的代码段，只需要复制粘贴进来就行了。不过如果想实现自定义网上没有的东西的话，还是得做上面的步骤。