小文’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 条评论
登录 后参与评论

相关文章

来自专栏子勰随笔

Markdown格式优化及使用技巧

74070
来自专栏一个会写诗的程序员的博客

Vue.js 极简教程jsfiddle Hello World 例子:参考资料:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

22410
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

354100
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

70130
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

77670
来自专栏Web行业观察

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

10220
来自专栏编程微刊

七个帮助你处理Web页面层布局的jQuery插件

23620
来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

22780
来自专栏非著名程序员

Android官方支持百分比设置宽和高的控件及示例

Android官方支持百分比设置宽和高的控件及示例 非著名程序员 Android官方终于支持按百分比来设置控件的宽和高了。有了这样的控件,写起来就比较方便了。其...

21590
来自专栏崔庆才的专栏

Javascript - 事件顺序

16950

扫码关注云+社区

领取腾讯云代金券