1. 如何在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(/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);font-weight: normal;}(不要忘记修改代码中font-family和url的值)加载完成后我们将可以通过如下代码实现对字体的使用。
2. Wordpress 主题 字体的问题
cite{color:#666;font-weight:300;letter-spacing:0.05em;text-transform:uppercase;font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;}
这段是我在你提供的CSS里找到的,如果这段是你定义所有字体的CSS的话,在font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;增加一项,变为:
font:12px “微软雅黑”,"Helvetica Neue",Helvetica,Arial,sans-serif;
因为不知道你的编码格式,如果上述不行,则换成:
font:12px “Microsoft Yahei”,"Helvetica Neue",Helvetica,Arial,sans-serif;
就是加个雅黑字体就可以了。
3. 如何在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(/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
(不要忘记修改代码中font-family和url的值)
加载完成后我们将可以通过如下代码实现对字体的使用。
4. 如何给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)
5. 如何在WordPress主题中使用Font Awesome
Font Awesome是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。
如果你想在自己的WordPress主题中使用Font Awesome,下面介绍了方法。要发布自己的主题,向用户提供font awesome作为一个卖点,下面是集成方法。
1. 下载Font Awesome,将font-asesome文件夹直接解压到你主题的根目录下2. 打开主题的functions.php,添加如下代码add_action( 'wp_enqueue_scripts', 'load_fontawesome_styles' ); function load_fontawesome_styles(){ global $wp_styles; wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' ); wp_enqueue_style( 'font-awesome-ie7', get_template_directory_uri() . '/font-awesome/css/font-awesome-ie7.min.css' ); $wp_styles->add_data( 'font-awesome-ie7', 'conditional', 'lte IE 7' ); }这段代码会引入font awesome主要的css文件,还会条件化加载修复ie7的css样式。3. 大功告成,下面就是使用了,使用的方式很多,官方推荐的方法是用i标签加class来添加,例如当然,也可以将class应用到其它标签,就像使用字体一样,可以设定字号、颜色、阴影等属性。
具体使用方法可以看官方文档其它说明需要注意的是font-awesome的css文件和字体文件要保持对应关系,如果你更改了字体目录名称或者位置,不要忘记修改css文件。具体说是修改font-awesome.css这个没压缩的文件,打开文件看开头的几行样式@font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.1.0'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg'); font-weight: normal; font-style: normal; }url里写的就是字体文件路径,根据自己的实际情况修改之。
之后将其压缩,就可以用了。
6. 如何把Wordpress全站的字体都设置成某个字体
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样式文件中进行修改。
7. 如何添加Google字体到你的wordpress主题
通过使用Google Web Fonts,你的博客不用上传任何字体,就能显示除了常用的“Arial”, “Verdana”等字体之外的其它字体。
众所周知,网站可读性取决于它的设计和外观。网页设计中扮演最重要角色的字体,使用的什么样的字体对您的网站很重要。
例如,Arial /Helvetica (sans-serif), Verdana and Georgia是我们常用的web设计的字体。这些字体提供一个很好的可读性,但如果你想用新字体,你需要做的就是确保浏览者的网络设备安装了这些字体。
这样很难确定。所以就得自己上传字体到服务器,并通过CSS来加以控制。
但现在,有一个更好的免费工具,那就是Google Web Fonts 在您使用Google Web Fonts服务之前,请首先了解以下两点: 1.选择太多的字体会减缓你的博客加载速度,所以你只需选择必须使用的。以免造成访问速度变慢的情况发生。
2.如果你只能选择你所需要的语言,你会帮助防止您的网页上的变得缓慢。 3.目前Google Web Fonts的界面及预览语言不为英语(不妨碍中文使用)。
Google Web Fonts能直观展示各种web字体,就像Serif, Sans-Serif, Display 和 Handwriting,你还可以浏览某些属性,如脚本显示字体、宽度、倾斜和厚度。 所有这些属性可以显示在侧窗格中。
在你选择你想要的字体时,你还可以直观预览诸如单词、句子、段落等整体样式。 下面是一个简单的教程,帮助你更快更好使用Google Web Fonts: 1.点击 Google Web Fonts 进入谷歌字体服务,选择您想要的字体,然后点击右下角 “Add to collection” 按钮,在这里,我们选择“Alike”字体来作为整个教程的例子字体。
2.点击“Add to collection”后,会在页面最下方出现这样一个信息“1 font family in your collection” 还有三个按钮,分别是“Choose“,“Review” 和“Use“. 在这里,我们选择 “Use“.也就是使用。 3.它还要求对字体设置。
选择可用的样式, 例如“粗体、斜体”等。 但只针对某些特定字体。
接下来,选择特定的语言字符。生成代码。
4.接下来是代码部门,谷歌字体提供三种应用代码,分别是标准模式“Standard (external stylesheet)”, 导出模式“@import method”和JS模式“Javascript”。根据需要,现在你需要的模式,不过在这里,我们建议选择标准模式。
转载请注明出处51数据库 » wordpress主题字体