专栏首页小文博客小文’s blog – WordPress自定义字体

小文’s blog – WordPress自定义字体

字体实现方式

在CSS中,我们会发现下面的语句(通常在style.css文件内)

font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden

1234567

font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;    line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden

WordPress一般都是通过修改font-family 属性来改变字体显示效果的

具体实现功能如下

所以我们修改字体就是通过修改第一行的字体类型

今天带来的是如何使用本地字体

教程开始

1.上传字体到本地(部分主题自带有字体,我们直接放到font文件夹里面,如果没有就新建一个文件夹)

2.使用 @font-face定义本地字体

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

将以下代码加入到css样式表里面(字体名请自己修改)

@font-face{ font-family:字体名; src:url(fonts/字体名.ttf) format ("truetype"); }

1234

@font-face{font-family:字体名;src:url(fonts/字体名.ttf) format ("truetype");}

然后就能调用了

3.因此我们打开CSS样式文件,在里面找到body,找到font-family修改成我们需要的字体,这样就完成了wordpress字体设置。

实际上,因为wordpress主题中的CSS样式文件有很大差别,设置也不是这么简单,我们需要找到各处的font-size进行修改。比较标准的wordpress主题都会设置一个body字体样式,然后后面的字体样式都是按比例缩放,因此我们修改完body,然后可以查看博客的显示,如果对某个地方的字体样式不满意,可以点击右键查看网页源代码,找到对应的样式class,然后在css样式文件中进行修改。

本文列举了wordpress字体设置方法,对于html代码一点都不懂的朋友可能修改起来比较困难,因此小文建议最好能够看一些html以及CSS样式相关的书籍,修改起来就非常容易。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • “息屏提醒”你的小米手机用上了吗

    神无月
  • wordpress指针样式自定义——美化你的blog

    神无月
  • [技术创作101训练营] 一文带你了解Redis如此火爆的原因

    前段时间,Sanfilippo在自己的博客上发布了一篇公告,表示将不再担当 Redis 开源项目的软件维护者,并“将 Redis 交给 Redis 社区”。这意...

    神无月
  • 字体反爬之猫眼电影

    目前看来是刚上映的银河补习班热度最高。但最后鹿死谁手还尚未可知,我们可以通过爬取猫眼的实时票房数据来一看究竟。

    老肥码码码
  • css渲染(一) 字体

    一、字体属性 1.默认字体系列   chrome/opera:"宋体"   firefox:"微软雅黑"   safari/IE:Times,"宋体" 2.字体...

    柴小智
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    GitHubDaily
  • 移动端引入的字体文件过大处理方法

    用户1741436
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    帅地
  • 怎么在自己的网页中引用其他好看的字体?

    有的网站字体,用户电脑上没有,如果只是单纯的定义 font-family 是不起效的。 我们可以将字体文件放置在网站目录(知道君喜欢放在OSS,但是这个需要注意...

    夏末浅笑
  • 「小程序JAVA实战」小程序注册界面的开发(29)

    PS:这个就是简单的注册页面,其实很多元素我也抄的网上的,但是要理解这个设计的思路很理念,别搬砖都不知道去哪里找,那就尴尬了。

    IT故事会

扫码关注云+社区

领取腾讯云代金券