编辑“玩转WordPress字体”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
==字体的重要性==
在[[博客]]上发表的文章无疑是博客/[[网站]]的主要组成部分。而文章中的字词、句子、各种色彩、图片，则向访问者展示了博客的魅力。同时对字体的选择也不可忽视。我们在[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html 开发主题]时选用的字体直接影响着人们的阅读兴趣。

字体的样式和风格多种多样，但除非我们已经在自己的计算机上安装了相应字体，否则在使用某些字体时，比如标准衬线字体和无衬线字体，会显示为“关闭”状态。想知道自己的计算机上安装了哪些字体？可以访问下文列出的一些字体网站，也可以通过这个[http://www.cameraontheroad.com/index.php?p=524 字体测试]来了解情况。如果计算机上安装了某种字体，这种字体就会显示在[[网页]]上，如果没有安装该字体，网页会以Courier字体显示文本。

我们可以在[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html 主题]的样式表单（通常即style.css文件）中选择字体类型（将要显示在页面上的所有字体列表）、颜色、大小以及字体其它属性。下面的代码设定了侧边栏的字体样式，将字体高度设为lem，颜色为蓝色（blue）：
 #menu {font-family: Verdana, Arial, Helvetica,sans-serif; font-size:1em; color:blue; }
从上面可以看出，代码中设定了不止一种字体。如果我们的计算机中没有Verdana字体，就用Arial字体代替。如果既没有Verdana字体也没有Arial字体，那么还可以用Helvetica来代替。如果三种字体都没有，我们的系统字体会选择使用默认字体sans-serif。给出多个字体选择不仅能帮助设计人员更好地管理字体，同时也使网站的“样式和感觉”前后更具有一致性。

一种字体类型通常由一个单词表示，但有时也能碰上用一个词组来表示一种字体类型的情况，比如说有种字体就叫做lucida console。在样式选择符中，如果某个字体名称的长度超过一个单词，该字体名称需要被引号包围：
 #menu {font-family: Verdana, Arial, Helvetica, "Lucida Console", sans-serif;.....

==WordPress中的字体==
WordPress主题使用字体的地方很多，但各个版块上的字体未必相同。这取决于主题开发者开发主题时的考虑。可能页头部分是一种字体，侧边栏使用另一种字体（甚至两种或三种），而日志正文又选择了不同于页头和侧边栏的第三种字体......要完全掌握网站使用的所有字体，有时候的确是项艰巨的任务。

几乎网站所有版块都可以看到文字的出现，因此要找到自己希望更改的字体，也是个不小的挑战。通常情况下，网站主体部分中设置了字体的总体情况：
 body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }
以上代码定义了网站中目前还没有被特定[[标签]]、类或DIV定义的所有字体。这些字体被称为“fall-back字体”。

网站页头部分的字体代码通常出现在header DIV中。同理，侧边栏所用字体的代码出现在sidebar或menu中，而页脚部分的字体代码则出现在footer DIV中。而判断正文部分字体代码的所在文件位置就有些难度了。

一般情况下（但不完全是这样）日志正文部分所用字体的代码存储在以下CSS类中：
*content 
*post 
*entry 
*post-entry 
这些[[CSS]]类中可能存放有某个类或段落标签中的字体信息：
 .content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }
侧边栏（菜单）嵌套列表中的字体很难缩小。要逐步了解WordPress网站中的所有嵌套列表，请看[http://www.wordpress.la/codex-%E7%94%A8CSS%E5%AE%9A%E5%88%B6%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F.html 怎样用CSS定制列表样式]。

如果仍然不能找到某种字体代码，请参考[http://www.wordpress.la/codex-%E6%9F%A5%E6%89%BECSS%E6%A0%B7%E5%BC%8F.html 查找CSS样式]介绍的各种使用技巧。

==选择字体==
哪一种字体在网站上的显示效果最好？这当然由我们自己决定，但有些资料能帮我们更好地作出选择。推荐使用大多数用户的计算机上都已经安装的、易于阅读的字体。

===字体测试===

点击下面的几个链接，看看哪些是最受欢迎的字体：
*[http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml Codestyle's   Windows Web Font Survey Results]
*[http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml Codestyle's   Font Survey For All Platforms]
*[http://www.webstyleguide.com/type/face.html Web Style Guide:   Typefaces] 

===字体大小===

我们也可以调整网站字体的大小。从过去的打字机时代到现在的文本处理器和桌面发布系统时代，“point”单位（一种表示字号大小的单位）一直发挥着它的作用。我们经常看到这样的字样——“12pt Times Roman”、“8pt Arial”等。但Point单位在[[网页]]上的效果并不理想，大多数浏览器无法辨别“point”在这里的意义。浏览器能够识别像素单位和百分比单位的字号，但不同浏览器解析打字机point字号的方式又有所不同。或许，除了Point字号，我们还有更好的选择。

可以将字号设为绝对字号，即所有字体的大小都是固定的，但这也有不好的地方。如果访问者将[[浏览器]]设为显示大号字体，或者使用一些[http://www.w3.org/WAI/ 视力、生理受损]者上网专用软件时，绝对字号就剥夺了他们“浏览”大号字体的权利。由于布局原因不得不将字体设为固定大小时，一定要确保网站的重要信息不能使用绝对字号。用下面的代码设置绝对字号：
 #menu ul li {font-size: 12px; color: green; }  
更常见的方法是，为整个文档规定一个基本字号，然后在此基础上进行调整，设置相对字体。我们根据自己的需要，以基本字号的百分比为单位，调整字体大小：
 body { font-size: 1em; }
 #menu ul li { font-size: 110%; color: green; }
===字体和文本字符===
字体还有很多有趣的用法，比如说我们可以使用斜体字、粗体字，也可以把每一段的第一个字放大显示。等等等等。本文只是简单介绍了怎样设置WordPress网站字体类型和大小，但我们还需要决定所用的字体风格、同种字体的用法与使用次数、字体的大小......以及哪种字体能够在我们的网站上达到最好的显示效果。不同浏览器解析字体的方法也不尽相同。下面的资料或许能为我们选择字体提供更多信息。
==相关资料==
*[http://www.thenoodleincident.com/tutorials/css/index.html#text The Noodle   Incident's CSS and Text]
*[http://www.w3schools.com/css/css_font.asp W3 Schools: CSS Fonts]
*[http://webdesign.about.com/cs/webdesignfonts/a/aa051903a.htm About.com's   Web Design (CSS): What is a Font]
*[http://www.thenoodleincident.com/tutorials/typography/index.html The   Noodle Incident's Tutorial on Typography]
*[http://www.htmlhelp.com/reference/css/font/ HTMLHelp's Font   Properties]
*[http://www.yourhtmlsource.com/text/textformattinglist.html HTML Source:   Text Formating]
*[http://webdepot.umn.edu/csguide/design_b.html University of Minnesota   Creative Standards Guide: Text and Fonts]
*[http://desktoppub.about.com/library/nosearch/bl-fewerfonts.htm About.com's   Web Design: How Many Fonts are Too Many]
*[http://www.font-finder.com/fonts.html Font-Finder]
*[http://www.thinkingwithtype.com/ Thinking with Type] 

<STRONG>字号相关资料</STRONG>>

*[http://www.w3.org/2003/07/30-font-size W3c's Care With Font Size]
*[http://www.alistapart.com/stories/sizematters/ CSS A List Apart: Size   Matters]
*[http://www.bigbaer.com/css_tutorials/css_font_size.htm BIG BAER Explains   CSS Font-Size]
*[http://www.miswebdesign.com/resources/articles/using-relatve-font-sizes.html MIS:   Using Relative Font Sizes]
*[http://www.wilk4.com/webdevres/fontcss3.htm WebDevRes: CSS Font Size   Control and Recommendations] 


<STRONG>疑难解答</STRONG>
*[http://css-discuss.incutio.com/?page=BrowserBugs Internet Explorer Font   Sizing Bugs]
*[http://archivist.incutio.com/viewlist/css-discuss/33917 Internet Explorer   Font Size Inheritance] 

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress使用|W]]