WordPress教程:网站中使用自定义字体

本文介绍了在WordPress网站中嵌入自定义字体的方法。由于使用图片字体不利于SEO且谷歌字体在国内受限,建议采用CSS的@font-face属性。具体步骤包括:获取多种格式的字体文件并进行格式转换,在样式表中声明字体,最后在需要的地方调用该字体。这种方法能确保字体在各浏览器中正常显示,同时提升网站加载速度和可维护性。

WordPress基础教程
阅读时间: 7 分钟
最后更新时间:2025年11月13日

在使用WordPress建站的过程中,很多时候我们希望在网页中使用某种特定的字体,而这种特定的字体并不是主流操作系统的内置字体。在使用比较少的情况下,我们可以把想要的文字做成图片,但是如果网页中需要大范围的使用该字体,做成图片的方法就行不通了。而且如果把文字内容做成图片不易修改,也不利于网站SEO。

谷歌字体是个不错的选择,它能够让字体在网页上显示的丰富多样,但是国内谷歌字体Google Fonts所在的googleapis.com网站被墙,根本加载不了,而且会导致WordPress加载速度变慢,我们在之前的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’;

}

这篇文章有用吗?

点击星号为它评分!

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

曾凤祥

曾凤祥

技术负责人
小兽WordPress凭借15年的WordPress企业网站开发经验,坚持以“为企业而生的WordPress服务”为宗旨,累计为10万多家客户提供高品质WordPress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽WordPress能坚持多年,是因为我们一直诚信。

相关文章

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部