• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >WordPress > WordPress教程:网站中使用自定义字体

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

作者:小兽 字体:[增加 减小] 来源:互联网 时间:2018-11-02

小兽向大家介绍了WordPress教程:网站中使用自定义字体等相关知识,希望对您有所帮助

在使用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’;

}

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-02wordpress建站对SEO须做的准备工作
  • 2017-05-13如何设置WordPress图片防盗链方法 推荐
  • 2018-11-02说说WordPress的主查询函数-query_posts()
  • 2017-05-13如何解决WordPress更改新域名后使得网站正常运行
  • 2017-05-13在wordpress可视化编辑器中输入带缩进的代码
  • 2018-11-02WordPress的固定链接如何设置?
  • 2017-05-13如何进行Wordpress的后台设置
  • 2018-11-02改进你的WordPress导航菜单(输出标题描述)
  • 2018-11-02WordPress获取相邻文章函数:get_adjacent_post
  • 2017-05-13WordPress伪静态和中文标签支持配置方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • wordpress实现发布文章自动ping 百度
    • WordPress评论等级代码 包含博主及友链认证
    • 全方位统计wordpress网站:WP Statistics插件
    • wordpress非插件实现添加链接转跳功能
    • 在WORDPRESS中使用表格:TablePress插件
    • WordPress 不同分类目录调用不同模板的方法
    • wordpress如何获取当前分类下的子分类
    • 提高性能!五种WordPress防止垃圾评论方法
    • wordpress管理员快速登录其他用户的账户
    • 使用Regenerate Thumbnails插件解决WordPress缩略图大小不一致

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有