加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > CMS系统 > wordpress > 正文

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

发布时间:2020-12-14 14:38:38 所属栏目: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浏览器

通常我们在网上只能下载到一种格式的字体,我们可以使用下载的字体在下方的网站中做字体格式转化:

2. 在样式表中声明该字体

我们以CygnetRoundRegular字体为例,在CSS中加入如下代码:

3. 在需要调用的地方添加如下代码(根据具体情况进行修改)

达到的效果如下:

customfont

效果不错吧,赶紧试一下吧。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读