WordPress:Playing With Fonts

字体代表你的内容

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 colors and pictures, tell your website's story. But, don't forget to pay attention to your font selections. The fonts you choose in designing your theme can influence whether or not people hang around to see more than a page or two of your pretty work.

毫无疑问，你的表述，你的文章是你的博客，或者站点中最重要的东西。这些表述，和你的可爱的颜色和图画，表述了你的站点的故事。但是，别忘了，关注你的字体选择。你在设计你的主题中选择的字体，可以影响到人们会不会逗留在网页上，访问不止一两页你的优秀的作品。

Fonts come in a wide variety of types and styles, but unfortunately, unless the user actually has that font installed on their machine, they will see something that is only "close", such as a generic serif or sans-serif, to what you wanted to present. If you want to see a list of what you have installed on your machine, visit several of the font sites listed below or this font test. If your font is there, you will see it. If not, you will see a generic Courier font.

字体有许多不同的样式和形式，但是不幸的是，除非用户真的将那个字体安装在他们的机器上，要不然的话，他们只看到一些"关闭"的字体，例如你想显示的一般的衬线字体和非衬线字体。如果你想看看你安装在机器上的字体列表，你可以访问下面所列的几个字体站点，或者这个字体测试。如果你的字体在那儿，你就能看到。如果你的字体没有在那儿显示，你能看到一个一般的Courier字体。

In your Theme's style sheet (style.css usually) you can control the font-family (the list of fonts to display), the color, the size, and other aspects of your font. The following example sets the fonts for your sidebar menu, sets the size to 1em high, and sets the color to blue:

在你的主题的样式表(通常是style.css)，你可以控制字体名称属性（要显示的字体列表），颜色，大小，以及你的字体的其它方面。下面的例子设置了你的工具条菜单上的字体，将大小设置为1em高，将颜色设置为蓝色：

#menu {font-family: Verdana, Arial, Helvetica,
   sans-serif; font-size:1em; color:blue; }

#菜单 {font-family: Verdana, Arial, Helvetica,
   sans-serif; font-size:1em; color:blue; }

As you can see, you've set more than one font in the font-family. If the user doesn't have Verdana, Arial will take over. If Verdana and Arial are missing, they have a chance to use Helvetica. If all else fails, the user's system fonts takes over and uses the default font for sans-serif. This list of choices helps the designer control the fonts and insures a more consistent "look and feel".

就如你所见到的那样，你在字体名称属性中设置了不止一个字体。如果用户没有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;.....

#menu {font-family: Verdana, Arial, Helvetica, 
     "Lucida Console", sans-serif;.....

WordPress中的字体

WordPress Themes use fonts in many different ways, and not always consistently. It depends upon the Theme author's decisions and needs in designing a Theme. Different fonts can be found in different areas of the website, one type in the header, another in the sidebar (or maybe two or three), and another font style or type in the post content area. Finding those fonts in order to change them, can give a user grief.

WordPress 主题以许多不同的方法使用主题，而且这些使用方法并不总是一致的。它取决于作者的决定以及设计主题的需求。网站上的不同位置能够找到不同的字体，一种字体在页眉上，另一种在工具条（或者可能是另两种或者三种），还有一种字体样式或者形式出现在文章内容区。找到这些字体，并且更改，会使用户悲痛。

Since fonts can be anywhere, finding the font you want to change can be a challenge. Generally, an overall font is set in the body of a website.

因为字体可能在任何weiz ，找到你想要更改的字体，会是一个挑战。一般来说，全部的字体都设置在一个站点的body。

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }

This covers the definition of the fonts found within the site that are not definied by a specific tag, class or div. It's the "fall-back font".

这包括了在站点内部发现的字体的定义，没有一个特别的标签，或者分类，或者div定义这个字体。它是"后退字体"。

Fonts found within the header of a site are normally found within the header div and same for the sidebar or menu and footer style divisions. The content, though, may be more challenging to track down.

在一个站点的页眉内部发现的字体通常可以在header div内部发现，对于sidebar 或者 menu 和footer样式层也是同样的。但是，要追溯到内容可能就更加具有挑战性了。

Fonts within the post content area are often found within the following, but not always, CSS classes:

文章内容中的字体通常可在以下的CSS分类中找到，但是并不总是这样：

• content
• 内容
• post
• 文章
• entry
• 条目
• post-entry
• 文章条目

They may have the font information in the specific class or in a paragraph tag: 可能在特别的类别或者在一个段落标签中有字体信息。

.content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }

.content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }

Fonts within the sidebar or menu nested lists can be very difficult to narrow down. For a step-by-step guide of all the nested lists found within many WordPress sites, see WordPress:Styling Lists with CSS.

sidebar或者 menu嵌套列表内部的字体，很难减少。关于许多WordPress站点内部的所有嵌套列表的一步步的指导，请看CSS设计列表。

If you are still having trouble tracking down a specific font code, consider using some of the tips and techniques in WordPress:Finding Your CSS Styles.

如果找到一个特别的字体代码时，你仍然有困难，考虑使用一些找到你的CSS样式中的一些小贴士和方法。

哪个字体

Determining which font will work best on your site is a personal choice, but there are articles that will help you decide. We recommend that you begin with fonts that are most commonly found on most people's computers, and that are easy to read.

决定你的站点使用哪种字体最好，是一个个人的选择，但是有一些文章会帮助你决定。我们推荐你开始时，使用一些大多数人的电脑上常见的，阅读起来比较简单的字体。

字体调查

To find out what fonts are most popular, check out the following: 找出哪种字体是最受欢迎的，查看一下以下的内容：

• Codestyle's Windows Web Font Survey Results

• Codestyle's Windows 万维网字体调查结果

• Codestyle's Font Survey For All Platforms

• Codestyle的所有平台的字体调查

• Web Style Guide: Typefaces

• 万维网样式指南: 字体

字体大小

You can also change the font size your viewers see. In the days of the typewriter and even with today's word processors and desktop publishing software, the "point" system is still in use. You should be familiar with things like "12pt Times Roman" and "8pt Arial". Point sizes don't work well on web pages because most browsers can't interpret what a "point" is. They understand pixels and percentages of a base size, but typewriter point sizes are interpreted differently on different browsers. You can use point size but there are better alternatives.

你可以更改你的访客看到的字体大小。在打印机时代，即使是在如今的文字处理软件和桌面出版软件，"磅"系统仍然在使用中。你应该熟悉"12pt Times Roman" 和"8pt Arial"。在网页上磅值使用得并不好，因为大多数浏览器不能翻译什么是一"磅"。浏览器能够理解像素和一个基本大小的百分比，但是不同的浏览器对于打印机磅值的翻译都是不同的。你可以使用磅值，但是你也有更好的选择。

You can set your fonts to be absolute, which means they are fixed in size, but that too, has disadvantages. The problem with absolute font size is that if a user has their browser set to "see" larger fonts (View > Text Size) or are using special software for the visually or physically disabled, you may have taken away their rights to "see" larger fonts. If you have to set the font to a specific size in order for your layout to work, make sure you don't use that font for your site's more important information. This example shows how to set an absolute font size:

你可以把字体设置为绝对的，这指的是，字体的大小是固定的，但是那样也有缺点。绝对字体大小的问题在于，如果一个用户将他们的浏览器设置为"看到"更大的字体(浏览 > 文本大小)或者使用一个特别的软件来视觉上或者物理上的缺陷，你可能要剥夺他们的权利"看"更大的字体。如果你将字体设置为一个规定的大小，以适应你的布局，确定对于站点上更加重要的信息，你没有使用那个字体。下面的例子显示了怎样设置一个完全的字体大小：

#menu ul li {font-size: 12px; color: green; }

1. 菜单 ul li {字体大小: 12px; 颜色: 绿色; }

The more popular method is to set your font-size for the whole document, then, base everything on a relative size from there. A percentage of the base font is used, allowing the font to resize itself based upon the user's preferences, too:

一个更通用的方法是在为整个文章设置字体大小，然后从那儿将每个部分字体以一个相关的大小为基础。一个基本字体的百分比也得到了使用，允许字体以用户的喜好为基础，重新调整大小：

body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }

body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }

字体和文本特征

There are a lot of fun things you can do with fonts! You can make your fonts italic, you can make them bold, and you can make the first letter of a paragraph larger than the rest of the text. The list of variations goes on and on. This lesson is just a peek into how to style and size fonts on your WordPress site. There is a lot more that goes into deciding which font to use, how to use it, how many to use, what sizes, and...well, which fonts will look best on your site. Different browsers interpret fonts in different ways, too. You can find more information to help you make your font decisions below.

你设置字体时，会有许多有趣的事情！你可以将字体设置为斜体的，你可以将它们设置为粗体的，你也可以将段落的第一个字母设置的比文章中其它的字母大。字体的变化列表是接连不断。这个课程只是怎样设置你的WordPress站点的形式和大小的匆匆一瞥。还有更多的知识关于使用哪一个字体，怎样使用字体，使用多少字体，什么字体，还有…恩，你的站点上哪一个字体看起来是最好的。而且不同的浏览器也以不同的方式翻译字体。你可以找到更多的信息来帮助你，完成下面的字体设置。

字体资源

• The Noodle Incident's CSS and Text

• Noodle Incident的CSS 和文本Text

• W3 Schools: CSS Fonts
• W3 Schools: CSS 字体
• About.com's Web Design (CSS): What is a Font
• About.com的万维网设计 (CSS): 什么是一个字体
• The Noodle Incident's Tutorial on Typography
• Noodle Incident的 印刷样式指南
• HTMLHelp's Font Properties
• HTMLHelp的 字体特性
• HTML Source: Text Formating
• HTML 原始资料: 文本样式
• University of Minnesota Creative Standards Guide: Text and Fonts
• 明尼苏达州大学的创造性标准指南: 文本和字体
• About.com's Web Design: How Many Fonts are Too Many
• About.com的万维网设计:多少个字体是太多了
• Font-Finder
• [1]
• Thinking with Type

• 思考类型

字体大小资源

• W3c's Care With Font Size
• W3c的关注字体大小
• CSS A List Apart: Size Matters
• CSS 一个分开的列表:大小问题
• BIG BAER Explains CSS Font-Size
• BIG BAER 解释 CSS 字体大小
• MIS: Using Relative Font Sizes
• MIS: 使用相关的字体大小
• WebDevRes: CSS Font Size Control and Recommendations

• WebDevRes: CSS 字体大小控制和建议

发现并解决字体问题

• Internet Explorer Font Sizing Bugs
• Internet Explorer 字体大小程序错误
• Internet Explorer Font Size Inheritance
• Internet Explorer Font Size 遗产