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中文字体
先判断下是否登录,然后获取当前用户对象,然后获取当前用户对象的信息,需要哪些用哪些:if(is_user_logged_in()){$current_user = wp_get_current_user();/*** @example Safe usage: $current_user = wp_get_current_user();* if ( !($current_user instanceof WP_User) )* return;*/echo 'Username: ' . $current_user->user_login . '';echo 'User email: ' . $current_user->user_email . '';echo 'User first name: ' . $current_user->user_firstname . '';echo 'User last name: ' . $current_user->user_lastname . '';echo 'User display name: ' . $current_user->display_name . '';echo 'User ID: ' . $current_user->ID . '';}。
3. 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;
就是加个雅黑字体就可以了。
4. wordpress自定义怎么写自定义css样式
CSS 背景属性(Background)background 在一个声明中设置所有的背景属性。
1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color 设置元素的背景颜色。
1 background-image 设置元素的背景图像。 1 background-position 设置背景图像的开始位置。
1 background-repeat 设置是否及如何重复背景图像。 1 CSS 边框属性(Border 和 Outline)border 在一个声明中设置所有的边框属性。
1 border-bottom 在一个声明中设置所有的下边框属性。 1 border-bottom-color 设置下边框的颜色。
2 border-bottom-style 设置下边框的样式。 2 border-bottom-width 设置下边框的宽度。
1 border-color 设置四条边框的颜色。 1 border-left 在一个声明中设置所有的左边框属性。
1 border-left-color 设置左边框的颜色。 2 border-left-style 设置左边框的样式。
2 border-left-width 设置左边框的宽度。 1 border-right 在一个声明中设置所有的右边框属性。
1 border-right-color 设置右边框的颜色。 2 border-right-style 设置右边框的样式。
2 border-right-width 设置右边框的宽度。 1 border-style 设置四条边框的样式。
1 border-top 在一个声明中设置所有的上边框属性。 1 border-top-color 设置上边框的颜色。
2 border-top-style 设置上边框的样式。 2 border-top-width 设置上边框的宽度。
1 border-width 设置四条边框的宽度。 1 outline 在一个声明中设置所有的轮廓属性。
2 outline-color 设置轮廓的颜色。 2 outline-style 设置轮廓的样式。
2 outline-width 设置轮廓的宽度。 2 CSS 文本属性(Text)color 设置文本的颜色。
1 direction 规定文本的方向 / 书写方向。 2 letter-spacing 设置字符间距。
1 line-height 设置行高。 1 text-align 规定文本的水平对齐方式。
1 text-decoration 规定添加到文本的装饰效果。 1 text-indent 规定文本块首行的缩进。
1 text-shadow 规定添加到文本的阴影效果。 2 text-transform 控制文本的大小写。
1 unicode-bidi 设置文本方向。 2 white-space 规定如何处理元素中的空白。
1 word-spacing 设置单词间距。 1 CSS 字体属性(Font)font 在一个声明中设置所有字体属性。
1 font-family 规定文本的字体系列。 1 font-size 规定文本的字体尺寸。
1 font-size-adjust 为元素规定 aspect 值。 2 font-stretch 收缩或拉伸当前的字体系列。
2 font-style 规定文本的字体样式。 1 font-variant 规定是否以小型大写字母的字体显示文本。
1 font-weight 规定字体的粗细。 1 CSS 外边距属性(Margin)margin 在一个声明中设置所有外边距属性。
1 margin-bottom 设置元素的下外边距。 1 margin-left 设置元素的左外边距。
1 margin-right 设置元素的右外边距。 1 margin-top 设置元素的上外边距。
1 CSS 内边距属性(Padding)padding 在一个声明中设置所有内边距属性。 1 padding-bottom 设置元素的下内边距。
1 padding-left 设置元素的左内边距。 1 padding-right 设置元素的右内边距。
1 padding-top 设置元素的上内边距。 1 CSS 列表属性(List)list-style 在一个声明中设置所有的列表属性。
1 list-style-image 将图象设置为列表项标记。 1 list-style-position 设置列表项标记的放置位置。
1 list-style-type 设置列表项标记的类型。 1 marker-offset 2 内容生成(Generated Content)content 与 :before 以及 :after 伪元素配合使用,来插入生成内容。
2 counter-increment 递增或递减一个或多个计数器。 2 counter-reset 创建或重置一个或多个计数器。
2 quotes 设置嵌套引用的引号类型。 2 CSS 尺寸属性(Dimension)height 设置元素高度。
1 max-height 设置元素的最大高度。 2 max-width 设置元素的最大宽度。
2 min-height 设置元素的最小高度。 2 min-width 设置元素的最小宽度。
2 width 设置元素的宽度。 1 CSS 定位属性(Positioning)bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。
2 clear 规定元素的哪一侧不允许其他浮动元素。 1 clip 剪裁绝对定位元素。
2 cursor 规定要显示的光标的类型(形状)。 2 display 规定元素应该生成的框的类型。
1 float 规定框是否应该浮动。 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。
2 overflow 规定当内容溢出元素框时发生的事情。 2 position 规定元素的定位类型。
2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。
2 vertical-align 设置元素的垂直对齐方式。 1 visibility 规定元素是否可见。
2 z-index 设置元素的堆叠顺序。 2 CSS 打印属性(Print)orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
2 page-break-after 设置元素后的分页行为。 2 page-break-before 设置元素前的分页行为。
2 page-break-inside 设置元素内部的分页行为。 2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。
2 CSS 表格属性(Table)border-collapse 规定是否合并表格边框。 2 border-spacing 规定相邻单元格边框。
5. 如何给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)。
转载请注明出处51数据库 » wordpress定义字体