扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
自定义字体可以使网站变得新颖,并使它脱颖而出。相信许多用户都想要为自己的网站添加自定义字体。今天我们将通过这篇教程为大家介绍运用Typekit和CSS3@Font-Face method
创新互联是一家专业提供余姚企业网站建设,专注与成都网站设计、做网站、H5建站、小程序制作等业务。10年已为余姚众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
在Wordpress主题中添加自定义主题已经成为一种普遍的趋势。实际上有的主题中加载了很多的自定义字体。但是加载太多的字体会使得你的网站变慢。所以今天我们要跟您分享正确加载自定义字体的方法,不至于使得网站变慢。
在添加自定义主题之前,我们首先要了解如何获取自定义主题。
付费字体一般都比较贵,但是我们可以在很多地方找到免费字体,比如:Typekit,FontSquirrel,fonts.com 等。
WordPress中添加自定义字体
Typekit中有付费和免费的字体,你可以使用付费的订阅也可以使用有限的免费的订阅。
首先注册Typekit账号并登陆,然后创建一个新的工具包:
然后选择一个你想要使用的字体,点击所选字体下方的“+Use fonts”按钮
如何在随后进入如下界面:
点击选择当前的工具箱,进入新的窗口,
在这个界面,需要我门做的有:
1、点击“Publish”按钮。
2、点击右上角Embed Code选项和左边栏中第一项中的Usingfonts in CSS按钮,复制界面中出现的两行Embed Code代码和要用到的CSS代码到txt文件并保存(之后会用到)。
然后回到你的WordPress管理界面,点击进入安装插件界面,安装并启用 Typekit Fonts for WordPress 插件。插件启用完成后,点击设置目录下的TypekitFonts选项,然后复制之前保存的Embed Code代码到插件设置界面,
然后添加如下代码到主题样式表中:
h1 .site-title {
font-family: 'modesto-condensed', Arial,sans-serif;
}
(代码中的’modesto-condensed’,是随着选择字体的不同而不同的。该信息在之前txt文件中有保存。)
还可以通过修改大括号之前的内容来设置运用字体的位置。
用CSS3@font-face在WordPress中添加自定义字体
运用CSS3@font-face是添加WordPress自定义字体最直接的方法。
首先你需要下载你喜欢的字体,并在你的主题或子主题目录下新建一个文件夹,命名为“fonts”然后上传字体到该文件夹。上传完成后,你还需要用CSS3@font-face将字体加载到你的主题样式表中,代码如下:
@font-face {
font-family: Arvo;
src:url();
font-weight: normal;
}
(不要忘记修改代码中font-family和url的值)
加载完成后我们将可以通过如下代码实现对字体的使用。
WordPress字体设置主要就是修改CSS样式文件。一般我们需要修改的就是字体大小font-size和字体家族属性font-family。
font-size属性可设置字体的尺寸,该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。一般我们把body正文的font-size设置成14px,对应的h1、h2等等属性都按照比例放大。
font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。中文网站的font-family一般设置成:
font-family:宋体,微软雅黑,Arial,Verdana,arial,serif;
因此我们打开CSS样式文件,在里面找到body,然后将font-size修改成14px,找到font-family修改成我们需要的字体,这样就完成了wordpress字体设置。
实际上,因为wordpress主题中的CSS样式文件有很大差别,设置也不是这么简单,我们需要找到各处的font-size进行修改。比较标准的wordpress主题都会设置一个body字体样式,然后后面的字体样式都是按比例缩放,因此我们修改完body,然后可以查看博客的显示,如果对某个地方的字体样式不满意,可以点击右键查看网页源代码,找到对应的样式class,然后在css样式文件中进行修改。
14px、首先打开你以前发布的文章;这样信息的字段1;上方的,选择外观-编辑:30px、观察查找到的:14px,字体变大后适当修改有利于显示更加美观:16px,查看左边文章字体大小
是否变大了,点击右键-审查元素
2。
6;这样的字段信息
3;字段,将14px修改为30px;{":
30px,则将其修改为font-size。
4,需要重新再找包含有font-size、在审查元素工具中:line-height控制行间距,默认的字体大小就是16px了,粘贴刚才复制的;line-height。
7,打开编辑主题样式表(style.article-content{
后面的内容;line-height:26px.article-content进去,直到找到为止。按CTRL+F打开查找,查找类似font-size。如果没有变大.article-content复制下来;这样的语句;进行查找;line-height、以后再发布文章时、点击选中font-size,非常方便.css)、点击找到的font-size:
26px,再加一个反括号"。
5:
14px。【注。选中一段文字、打开wordpress后台。】改好后点击最下面的“更新文件”,如果包含有font-size;即可,或者新编辑的文章使用预览浏览也可以:
14px
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流