wordpress 如何添加字体?可以自定义字体吗?

一、如何给wordpress CMS主题文章编辑器添加字号,字体等按钮

对于wordpress 默认的文章编辑器用过wordpress的朋友都会知道,非常简单,只配有基本的一些简单功能按钮(如下图1)。这样一来,对于一些要求比较高的用户来说,就不够用了。

比如:想调整字体、字体大小、缩进等等,这个时候,我们就有必要为wordpress CMS主题添加一下这些按钮了。

那么, 怎样为wordpress cms主题添加字号按钮到文章编辑器中呢?下面就一起来看看吧。

其实实现起来还是非常简单的,在你的wordpress主题的functions.php文件中添加如下代码:

function add_more_buttons($buttons) {
$buttons[] = ‘hr'; //水平线
$buttons[] = ‘fontselect'; //字体
$buttons[] = ‘fontsizeselect'; //字号
$buttons[] = ‘styleselect'; //样式,格式
$buttons[] = ‘wp_page'; //分页符
$buttons[] = ‘copy'; //复制
$buttons[] = ‘paste'; //粘贴
$buttons[] = ‘cut'; //剪切
$buttons[] = ‘backcolor'; //背景色
return $buttons;
}
add_filter(“mce_buttons_3″, “add_more_buttons”);

通过上面的代码,我们为wordpress CMS主题的文章编辑器添加了9个很管用的按钮:水平线、字体、字号、格式、分页符、复制、粘贴、剪切、背景色。这些按钮可以很好地丰富我们的文章内容。效果如下图:

以下提供一下wordpress编辑器的一些按钮调用的Key代码,可能根据自己的需要添加到上面的代码中:

1.剪切(cut)复制(copy)粘贴(paste)撤销(undo)重做(redo)居中(justifycenter

2.加粗(bold)斜体(italic)左对齐(justifyleft)右对齐(justfyright)

3.两端对齐(justfyfull)插入超链接(link)取消超链接(unlink)插入图片(image)

4.清除格式(removeformat)下划线(underline)删除线(strikethrough)

5.锚文本(anchor)新建文本(newdocument)

6.字体颜色(forecolor)字体背景色(backcolor)

7.格式选择(formmatselect)字体选择(fontselect)字号选择(fontsizeselect)

8.样式选择(styleselect)无序列表(bullist)编号列表(numlist)

9.减少缩进(outdent)缩进(indent)帮助(wp_help)

10打开HTML代码编辑器(code)水平线(hr)清除冗余代码(cleanup)

11.上标(sub)下标(sup)特殊符号(charmap)插入more标签(wp_more)

12.插入分页标签(wp_page)

13.隐藏按钮显示开关(wp_adv)

二、如何在WordPress中添加自定义字体

自定义字体可以使网站变得新颖,并使它脱颖而出。相信许多用户都想要为自己的网站添加自定义字体。今天我们将通过这篇教程为大家介绍运用Typekit和CSS3@Font-Face method

在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(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
(不要忘记修改代码中font-family和url的值)加载完成后我们将可以通过如下代码实现对字体的使用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注