WordPress: Playing With Fonts:修订间差异
(新页面: ==Fonts Represent Your Content== There's no doubt that your words, your posts, are the meat and potatoes of your blog or website. Those words, along with your lovely [[WordPress:Develop...) |
无编辑摘要 |
||
(未显示另一用户的1个中间版本) | |||
第1行: | 第1行: | ||
== | ==字体代表你的内容== | ||
毫无疑问,你的表述,你的文章是你的博客,或者站点中最重要的东西。这些表述,和你的可爱的[[WordPress:Developing_a_Colour_Scheme|颜色]]和图画,表述了你的站点的故事。但是,别忘了,关注你的字体选择。你在[[WordPress:Theme Development|设计你的主题]]中选择的字体,可以影响到人们会不会逗留在网页上,访问不止一两页你的优秀的作品。 | |||
字体有许多不同的样式和形式,但是不幸的是,除非用户真的将那个字体安装在他们的机器上,要不然的话,他们只看到一些"关闭"的字体,例如你想显示的一般的衬线字体和非衬线字体。如果你想看看你安装在机器上的字体列表,你可以访问下面所列的几个字体站点,或者这个[http://www.cameraontheroad.com/index.php?p=524 字体测试]。如果你的字体在那儿,你就能看到。如果你的字体没有在那儿显示,你能看到一个一般的Courier字体。 | |||
在你的[[WordPress:Using_Themes|主题的]]样式表(通常是<tt>style.css</tt>),你可以控制字体名称属性(要显示的字体列表),颜色,大小,以及你的字体的其它方面。下面的例子设置了你的工具条菜单上的字体,将大小设置为<tt>1em</tt>高,将颜色设置为蓝色: | |||
<pre>#菜单 {font-family: Verdana, Arial, Helvetica, | |||
<pre># | |||
sans-serif; font-size:1em; color:blue; }</pre> | sans-serif; font-size:1em; color:blue; }</pre> | ||
就如你所见到的那样,你在字体名称属性中设置了不止一个字体。如果用户没有Verdana, Arial就会起作用。如果Verdana和Arial都没有,他们就有机会使用Helvetica。如果其它的都没有,用户的系统字体会起作用,为<em>sans-serif</em>使用默认的字体。这个选择列表帮助设计者控制字体,并且确保一个更加一致的"外观和给人的感觉"。 | |||
Font families tend to be single words, but on occasion you will find a phrase to represent a font such as <em>Lucida Console</em>. This is set in the style selector surrounded with quote marks such as: | Font families tend to be single words, but on occasion you will find a phrase to represent a font such as <em>Lucida Console</em>. This is set in the style selector surrounded with quote marks such as: | ||
字体名称属性倾向是一个单词,但是有时,你可以看到一个词组代表一个字体,例如<em>Lucida Console</em>。这个在引号中,设置在样式选择器中,例如: | |||
<pre>#menu {font-family: Verdana, Arial, Helvetica, | <pre>#menu {font-family: Verdana, Arial, Helvetica, | ||
"Lucida Console", sans-serif;.....</pre> | "Lucida Console", sans-serif;.....</pre> | ||
== | == WordPress中的字体== | ||
[[WordPress:Using Themes|WordPress | [[WordPress:Using Themes|WordPress 主题]]以许多不同的方法使用主题,而且这些使用方法并不总是一致的。它取决于作者的决定以及设计主题的需求。网站上的不同位置能够找到不同的字体,一种字体在页眉上,另一种在工具条(或者可能是另两种或者三种),还有一种字体样式或者形式出现在文章内容区。找到这些字体,并且更改,会使用户悲痛。 | ||
因为字体可能在任何weiz ,找到你想要更改的字体,会是一个挑战。一般来说,全部的字体都设置在一个站点的<tt>body</tt>。 | |||
<pre>body {font-family: Verdana, Arial, Helvetica, | <pre>body {font-family: Verdana, Arial, Helvetica, | ||
第30行: | 第29行: | ||
</pre> | </pre> | ||
这包括了在站点内部发现的字体的定义,没有一个特别的标签,或者分类,或者div定义这个字体。它是"后退字体"。 | |||
在一个站点的页眉内部发现的字体通常可以在<tt>header</tt> div内部发现,对于<tt>sidebar</tt> 或者 <tt>menu</tt> 和<tt>footer</tt>样式层也是同样的。但是,要追溯到内容可能就更加具有挑战性了。 | |||
* | 文章内容中的字体通常可在以下的CSS分类中找到,但是并不总是这样: | ||
* | *内容 | ||
* | *文章 | ||
* | *条目 | ||
*文章条目 | |||
可能在具体的类别或者在一个段落标签中有字体信息。 | |||
<pre>.content p { margin:5px; | <pre>.content p { margin:5px; | ||
第50行: | 第48行: | ||
</pre> | </pre> | ||
<tt>sidebar</tt>或者 <tt>menu</tt>嵌套列表内部的字体,很难减少。关于许多WordPress站点内部的所有嵌套列表的一步步的指导,请看[[WordPress:Styling Lists with CSS|CSS设计列表]]。 | |||
如果找到一个特别的字体代码时,你仍然有困难,考虑使用一些[[WordPress:Finding Your CSS Styles|找到你的CSS样式]]中的一些小贴士和方法。 | |||
== | ==哪个字体== | ||
决定你的站点使用哪种字体最好,是一个个人的选择,但是有一些文章会帮助你决定。我们推荐你开始时,使用一些大多数人的电脑上常见的,阅读起来比较简单的字体。 | |||
=== | ===字体调查=== | ||
找出哪种字体是最受欢迎的,查看一下以下的内容: | |||
* [http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml Codestyle's Windows | * [http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml Codestyle's Windows 万维网字体调查结果] | ||
* [http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml Codestyle的所有平台的字体调查] | |||
* [http://www.webstyleguide.com/type/face.html 万维网样式指南: 字体] | |||
===字体大小=== | |||
你可以更改你的访客看到的字体大小。在打印机时代,即使是在如今的文字处理软件和桌面出版软件,"磅"系统仍然在使用中。你应该熟悉"12pt Times Roman" 和"8pt Arial"。在网页上磅值使用得并不好,因为大多数浏览器不能翻译什么是一"磅"。浏览器能够理解像素和一个基本大小的百分比,但是不同的浏览器对于打印机磅值的翻译都是不同的。你可以使用磅值,但是你也有更好的选择。 | |||
你可以把字体设置为绝对的,这指的是,字体的大小是固定的,但是那样也有缺点。绝对字体大小的问题在于,如果一个用户将他们的浏览器设置为"看到"更大的字体('''浏览 > 文本大小''')或者使用一个特别的软件来[http://www.w3.org/WAI 视觉上或者物理上的缺陷],你可能要剥夺他们的权利"看"更大的字体。如果你将字体设置为一个规定的大小,以适应你的布局,确定对于站点上更加重要的信息,你没有使用那个字体。下面的例子显示了怎样设置一个完全的字体大小: | |||
#菜单 ul li {字体大小: 12px; 颜色: 绿色; } | |||
一个更通用的方法是在为整个文章设置字体大小,然后从那儿将每个部分字体以一个相关的大小为基础。一个基本字体的百分比也得到了使用,允许字体以用户的喜好为基础,重新调整大小: | |||
<pre>body { font-size: 1em; } | <pre>body { font-size: 1em; } | ||
#menu ul li { font-size: 110%; color: green; }</pre> | #menu ul li { font-size: 110%; color: green; }</pre> | ||
=== | ===字体和文本特征=== | ||
你设置字体时,会有许多有趣的事情!你可以将字体设置为斜体的,你可以将它们设置为粗体的,你也可以将段落的第一个字母设置的比文章中其它的字母大。字体的变化列表是接连不断。这个课程只是怎样设置你的WordPress站点的形式和大小的匆匆一瞥。还有更多的知识关于使用哪一个字体,怎样使用字体,使用多少字体,什么字体,还有…恩,你的站点上哪一个字体看起来是最好的。而且不同的浏览器也以不同的方式翻译字体。你可以找到更多的信息来帮助你,完成下面的字体设置。 | |||
== | ==字体资源== | ||
* [http://www. | * [http://www.thenoodleincident.com/tutorials/css/index.html#text Noodle Incident的CSS 和文本Text] | ||
* [http://www. | * [http://www.w3schools.com/css/css_font.asp W3 Schools: CSS 字体] | ||
* [http://www. | * [http://webdesign.about.com/cs/webdesignfonts/a/aa051903a.htm About.com的万维网设计 (CSS): 什么是一个字体] | ||
* [http://www. | * [http://www.thenoodleincident.com/tutorials/typography/index.html Noodle Incident的 印刷样式指南] | ||
* [http:// | * [http://www.htmlhelp.com/reference/css/font/ HTMLHelp的 字体特性] | ||
* [http://www.yourhtmlsource.com/text/textformattinglist.html HTML 原始资料: 文本样式] | |||
* [http://webdepot.umn.edu/csguide/design_b.html 明尼苏达州大学的创造性标准指南: 文本和字体] | |||
* [http://desktoppub.about.com/library/nosearch/bl-fewerfonts.htm About.com的万维网设计:多少个字体是太多了] | |||
* [http://www.font-finder.com/fonts.html字体-探测器] | |||
* [http://www.thinkingwithtype.com/ 思考类型] | |||
===字体大小资源=== | |||
* [http://www.w3.org/2003/07/30-font-size W3c的关注字体大小] | |||
* [http://www.alistapart.com/stories/sizematters/ CSS 一个分开的列表:大小问题] | |||
* [http://www.bigbaer.com/css_tutorials/css_font_size.htm BIG BAER 解释 CSS 字体大小] | |||
* [http://www.miswebdesign.com/resources/articles/using-relatve-font-sizes.html MIS: 使用相关的字体大小] | |||
* [http://www.wilk4.com/webdevres/fontcss3.htm WebDevRes: CSS 字体大小控制和建议] | |||
* [http://css-discuss.incutio.com/?page=BrowserBugs Internet Explorer | ===发现并解决字体问题=== | ||
* [http://archivist.incutio.com/viewlist/css-discuss/33917 Internet Explorer Font Size | * [http://css-discuss.incutio.com/?page=BrowserBugs Internet Explorer 字体大小程序错误] | ||
* [http://archivist.incutio.com/viewlist/css-discuss/33917 Internet Explorer Font Size 遗产] |
2008年4月17日 (四) 12:05的最新版本
字体代表你的内容[ ]
毫无疑问,你的表述,你的文章是你的博客,或者站点中最重要的东西。这些表述,和你的可爱的颜色和图画,表述了你的站点的故事。但是,别忘了,关注你的字体选择。你在设计你的主题中选择的字体,可以影响到人们会不会逗留在网页上,访问不止一两页你的优秀的作品。
字体有许多不同的样式和形式,但是不幸的是,除非用户真的将那个字体安装在他们的机器上,要不然的话,他们只看到一些"关闭"的字体,例如你想显示的一般的衬线字体和非衬线字体。如果你想看看你安装在机器上的字体列表,你可以访问下面所列的几个字体站点,或者这个字体测试。如果你的字体在那儿,你就能看到。如果你的字体没有在那儿显示,你能看到一个一般的Courier字体。 在你的主题的样式表(通常是style.css),你可以控制字体名称属性(要显示的字体列表),颜色,大小,以及你的字体的其它方面。下面的例子设置了你的工具条菜单上的字体,将大小设置为1em高,将颜色设置为蓝色:
#菜单 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:blue; }
就如你所见到的那样,你在字体名称属性中设置了不止一个字体。如果用户没有Verdana, Arial就会起作用。如果Verdana和Arial都没有,他们就有机会使用Helvetica。如果其它的都没有,用户的系统字体会起作用,为sans-serif使用默认的字体。这个选择列表帮助设计者控制字体,并且确保一个更加一致的"外观和给人的感觉"。 Font families tend to be single words, but on occasion you will find a phrase to represent a font such as Lucida Console. This is set in the style selector surrounded with quote marks such as: 字体名称属性倾向是一个单词,但是有时,你可以看到一个词组代表一个字体,例如Lucida Console。这个在引号中,设置在样式选择器中,例如:
#menu {font-family: Verdana, Arial, Helvetica, "Lucida Console", sans-serif;.....
WordPress中的字体[ ]
WordPress 主题以许多不同的方法使用主题,而且这些使用方法并不总是一致的。它取决于作者的决定以及设计主题的需求。网站上的不同位置能够找到不同的字体,一种字体在页眉上,另一种在工具条(或者可能是另两种或者三种),还有一种字体样式或者形式出现在文章内容区。找到这些字体,并且更改,会使用户悲痛。
因为字体可能在任何weiz ,找到你想要更改的字体,会是一个挑战。一般来说,全部的字体都设置在一个站点的body。
body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif; font-size: 1em; padding:0; margin:0; }
这包括了在站点内部发现的字体的定义,没有一个特别的标签,或者分类,或者div定义这个字体。它是"后退字体"。
在一个站点的页眉内部发现的字体通常可以在header div内部发现,对于sidebar 或者 menu 和footer样式层也是同样的。但是,要追溯到内容可能就更加具有挑战性了。
文章内容中的字体通常可在以下的CSS分类中找到,但是并不总是这样:
- 内容
- 文章
- 条目
- 文章条目
可能在具体的类别或者在一个段落标签中有字体信息。
.content p { margin:5px; padding:5px; font-family: Tahoma, Verdana, Helvetica, sans-serif; font-size: 110%; color: black; }
sidebar或者 menu嵌套列表内部的字体,很难减少。关于许多WordPress站点内部的所有嵌套列表的一步步的指导,请看CSS设计列表。
如果找到一个特别的字体代码时,你仍然有困难,考虑使用一些找到你的CSS样式中的一些小贴士和方法。
哪个字体[ ]
决定你的站点使用哪种字体最好,是一个个人的选择,但是有一些文章会帮助你决定。我们推荐你开始时,使用一些大多数人的电脑上常见的,阅读起来比较简单的字体。
字体调查[ ]
找出哪种字体是最受欢迎的,查看一下以下的内容:
字体大小[ ]
你可以更改你的访客看到的字体大小。在打印机时代,即使是在如今的文字处理软件和桌面出版软件,"磅"系统仍然在使用中。你应该熟悉"12pt Times Roman" 和"8pt Arial"。在网页上磅值使用得并不好,因为大多数浏览器不能翻译什么是一"磅"。浏览器能够理解像素和一个基本大小的百分比,但是不同的浏览器对于打印机磅值的翻译都是不同的。你可以使用磅值,但是你也有更好的选择。
你可以把字体设置为绝对的,这指的是,字体的大小是固定的,但是那样也有缺点。绝对字体大小的问题在于,如果一个用户将他们的浏览器设置为"看到"更大的字体(浏览 > 文本大小)或者使用一个特别的软件来视觉上或者物理上的缺陷,你可能要剥夺他们的权利"看"更大的字体。如果你将字体设置为一个规定的大小,以适应你的布局,确定对于站点上更加重要的信息,你没有使用那个字体。下面的例子显示了怎样设置一个完全的字体大小:
- 菜单 ul li {字体大小: 12px; 颜色: 绿色; }
一个更通用的方法是在为整个文章设置字体大小,然后从那儿将每个部分字体以一个相关的大小为基础。一个基本字体的百分比也得到了使用,允许字体以用户的喜好为基础,重新调整大小:
body { font-size: 1em; } #menu ul li { font-size: 110%; color: green; }
字体和文本特征[ ]
你设置字体时,会有许多有趣的事情!你可以将字体设置为斜体的,你可以将它们设置为粗体的,你也可以将段落的第一个字母设置的比文章中其它的字母大。字体的变化列表是接连不断。这个课程只是怎样设置你的WordPress站点的形式和大小的匆匆一瞥。还有更多的知识关于使用哪一个字体,怎样使用字体,使用多少字体,什么字体,还有…恩,你的站点上哪一个字体看起来是最好的。而且不同的浏览器也以不同的方式翻译字体。你可以找到更多的信息来帮助你,完成下面的字体设置。
字体资源[ ]
- Noodle Incident的CSS 和文本Text
- W3 Schools: CSS 字体
- About.com的万维网设计 (CSS): 什么是一个字体
- Noodle Incident的 印刷样式指南
- HTMLHelp的 字体特性
- HTML 原始资料: 文本样式
- 明尼苏达州大学的创造性标准指南: 文本和字体
- About.com的万维网设计:多少个字体是太多了
- [1]
- 思考类型