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

相关文章

来自专栏WebHub

可视化讲解 DOM 的构建过程

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

562
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

3875
来自专栏崔庆才的专栏

Javascript - 事件顺序

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

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

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

931
来自专栏Windows Community

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

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

34310
来自专栏听雨堂

对asp.net响应事件的试验

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

1968
来自专栏24K纯开源

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

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

4497
来自专栏Java帮帮-微信公众号-技术文章全总结

HTML5 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,...

3627
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

4637
来自专栏编程微刊

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

1462

扫码关注云+社区