财神爷到底是谁

書(shū)名： WordPress 2.7 Cookbook
作者名： Jean-Baptiste Jung
本章字?jǐn)?shù)： 511字
更新時(shí)間： 2021-04-01 13:55:49

Modifying your theme fonts

Now that you have learned how to search and replace hexadecimal color codes, let's customize your theme a bit more.

In this recipe, we're going to see how we can easily modify the fonts used in a WordPress theme and also discuss about the good practices for typography on a WordPress blog.

Getting ready

For this recipe, you'll need exactly the same things that were needed in the Modifying your theme colors recipe—a theme to customize, and a text editor.

A common beginner mistake is to try and use non web-safe fonts on a web site or blog. For example, there are web sites using the Myriad Pro or Segoe UI fonts. These fonts look beautiful, but what if only 10 or less percent of your readers can render it?

The following web-safe fonts can be used on any web sites:

Times New Roman
Arial
Verdana
Courier
Comic

Installed on more than 80% of computers, these two fonts can be used as well:

Trebuchet MS
Century Gothic

How to do it...

Most WordPress themes use a maximum of three different fonts. However, it is common to only use one or two different fonts. There's not a big choice, in terms of fonts, due to the fact that a user must have the font installed on his computer to have it render correctly on a web site.

In order to modify the fonts of a theme, the first step is to find out which are the fonts used. To do so, open the style.css file, in Vi and use the search command to find the font and font-family CSS properties:
/font
This command will find all the occurrences of font in the stylesheet. To go to the next occurrence, simply type n.
The font-family CSS property looks as follows:
font-family: "Trebuchet MS", arial, serif;
This CSS property allows you to specify one or more fonts to be used. In our example, if in case Trebuchet MS isn't available on the client computer, Arial will be used.
The font CSS property is a shorthand which allows you to specify all the font related parameters on a single line:
font: italic small-caps bold 12px arial;
To modify the size of a font, you'll look for the font-size CSS property.

There's more...

Tips and things to know about fonts

It can be very tempting to play with the fonts and CSS fonts related properties. However, there are a few things to be kept in mind:

The standard font size of a text is between 11 and 14 pixels; 12px is the most common choice of font size. For titles, (h1, h2, h3, and so on) a font size between 14 and 26 pixels is good.
While using a font with a two word name (for example, Trebuchet MS), always put it between quotes; that is, font-family: "Trebuchet MS";)
While defining font families always list at least two fonts, and offer a generic family name as the last alternative. The client's browser will use the first font that it recognizes.

官术网_书友最值得收藏!

WordPress 2.7 Cookbook

Modifying your theme fonts

Getting ready

How to do it...

There's more...

Tips and things to know about fonts