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

相关文章

来自专栏软件工程师成长笔记

火星坐标拾取工具

在国内必须至少使用GCJ-02的坐标系,而GCJ-02,“火星坐标”是在国内最广泛使用的坐标体系。那么,我们就来看看,如何直接获取到GCJ-02坐标呗。 请大...

1162
来自专栏Java后端技术

欠的债,这一次都还给你们

  前段时间,写的一篇关于博客园主题皮肤分享的文章,一经发出便受到了极大的热捧,后来很多网友留言说,想要让我分享现在的模板,毕竟现在这个模板已经比之前分享的那个...

733
来自专栏影子

css伪类的说明以及使用(css事件)

3397
来自专栏前端杂货铺

文本框的属性监测

之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。   对于IE全系列,可...

2886
来自专栏菩提树下的杨过

用Design+Blend轻松制作环形文字

先看效果图: ? 步骤: 1.先启动Microsoft Expression Design 3 a.画一个正圆,再随便打几个字,同时选中文字和圆 b.选择菜单栏...

17110
来自专栏我分享我快乐

水平线上涨loading实现原理

前期准备:需要一张水平线荡漾图片,格式为png或svg 代码实现如下: <!doctype html> <html> <head> <script src="...

28910
来自专栏葡萄城控件技术团队

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

2049
来自专栏菩提树下的杨过

FluorineFx:视频录制及回放(Flash/AS3环境)

如果不考虑安全因素(指任何人都可连接FluorineFx进行视频录制,而不需要登录认证),其实服务端不用写一行代码,仅需要在apps目录下建一个子目录当作应用,...

1846
来自专栏web编程技术分享

【H5 音乐播放实例】第一节 音乐详情页制作(1)

1316
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

4265

扫码关注云+社区