在使用 WordPress 建站的过程中,很多时候我们希望在网页中使用某种特定的字体,而这种特定的字体并不是主流操作系统的内置字体。在使用比较少的情况下,我们可以把想要的文字做成图片,但是如果网页中需要大范围的使用该字体,做成图片的方法就行不通了。而且如果把文字内容做成图片不易修改,也不利于网站 SEO 。
谷歌字体本来是个不错的选择,它能够让字体在网页上显示的丰富多样,但是国内谷歌字体 Google Fonts 所在的 googleapis.com 网站被墙,根本加载不了,而且会导致 WordPress 加载速度变慢,据几个老师级的人物介绍 WordPress 中尽量不要去使用谷歌字体。
在这种情况下,使用 CSS 的 @font-face 属性在网页中嵌入自定义字体成为最佳选择,下面的 WordPress 教程里,我们就向大家介绍一下 WordPress 网站中如何嵌入自定义字体。
1. 获取要使用字体的文件格式,确保能在主流浏览器中都能正常显示该字体。
- .TTF 或.OTF 格式字体,适用于 Firefox 3.5 、 Safari 、 Opera 浏览器
- .EOT 格式字体,适用于 Internet Explorer 4.0+浏览器
- .SVG 格式字体,适用于 Chrome 、 IPhone 浏览器
通常我们在网上只能下载到一种格式的字体,我们可以使用下载的字体在下方的网站中做字体格式转化:
http://www.fontsquirrel.com/fontface/generator
2. 在样式表中声明该字体
我们以 CygnetRoundRegular 字体为例,在 CSS 中加入如下代码:
@font-face { font-family: ‘CygnetRoundRegular’; src: url(‘cygnetround-webfont.eot’); src: url(‘cygnetround-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘cygnetround-webfont.woff’) format(‘woff’), url(‘cygnetround-webfont.ttf’) format(‘truetype’), url(‘cygnetround-webfont.svg#CygnetRoundRegular’) format(‘svg’); font-weight: normal; font-style: normal; }
3. 在需要调用的地方添加如下代码(根据具体情况进行修改)
#customfont p{ font-family: ‘CygnetRoundRegular’; }
效果如何,小伙伴赶紧去试一下吧。:
本文作者为song,转载请注明。
自定义字体建议使用各大厂提供的cdn,或者用woff2格式的~提高加载速度~
@koobai收到,谢谢空白