CSS Font教程：设计与应用指南

需积分: 10 107 浏览量更新于2024-07-20 1 收藏 11.05MB PDF 举报

本教程是关于CSS Font的深入指南，由Eric A. Meyer撰写，标题为《CSS Fonts》。它由O'Reilly Media出版，版权属于2013年的O'Reilly Media，享有所有权利。这本手册是针对Web开发者的专业资源，旨在帮助读者理解和掌握如何在网页设计中有效地使用CSS来控制字体样式、大小、布局和可访问性。该教程首先介绍了CSS Font的基础概念，包括如何定义字体家族（font-family）、字体系列（font-style和font-weight）、尺寸（font-size）以及线高度（line-height）。此外，它还会探讨如何通过@font-face规则引入自定义字体，以及如何确保在不同浏览器和设备上的兼容性。作者Eric A. Meyer以其丰富的经验，提供了实用的技巧和最佳实践，帮助读者解决在实际项目中可能遇到的挑战。教程中可能包含对字体权重、间距、行间距、对齐方式等内容的详细讲解，以及如何利用CSS3的新特性如字重（font-feature-settings）和OpenType特性。对于想要提升网页设计质量和用户体验的设计师和开发人员来说，这是一本不可或缺的参考资料。书中还提供了在线版本，方便用户随时随地学习。封面设计者Randy Comer和内部设计师David Futato可能展示了这本书的视觉风格，而插图则由Rebecca Demarest创作。值得注意的是，这本手册是在2013年7月首次发布，并且有一个修订历史记录，以便跟踪任何更新或错误的更正。《Nutshell Handbook》、《Nutshell Handbook》图标以及O'Reilly的商标均为O'Reilly Media的注册商标。对于获取已发布的详细信息，读者可以访问http://oreilly.com/catalog/errata.csp?isbn=9781449371494。这本CSS Font教程是为IT专业人士提供了一个全面的指南，让他们能在现代网页设计中熟练运用CSS来优化文字呈现，提升网站的整体设计质量。无论是初学者还是进阶开发者，都能从中受益匪浅。

Figure 1. Various font families

Thus, most of the document will use a serif font such as Times, including all paragraphs

except those that have a class of signature, which will instead be rendered in a cursive

font such as Author. Heading levels 1 through 4 will use a sans-serif font like Helvetica,

while the elements code, pre, tt, and kbd will use a monospace font like Courier.

Specifying a Font Family

An author may, on the other hand, have more specific preferences for which font to use

in the display of a document or element. In a similar vein, a user may want to create a

user style sheet that defines the exact fonts to be used in the display of all documents.

In either case, font-family is still the property to use.

Assume for the moment that all h1s should use Georgia as their font. The simplest rule

for this would be the following:

h1 {font-family: Georgia;}

This will cause the user agent displaying the document to use Georgia for all h1s, as

shown in Figure 2.

Figure 2. An h1 element using Georgia

4 | Fonts

www.it-ebooks.info

Of course, this rule assumes that the user agent has Georgia available for use. If it doesn’t,

the user agent will be unable to use the rule at all. It won’t ignore the rule, but if it can’t

find a font called “Georgia,” it can’t do anything but display h1 elements using the user

agent’s default font (whatever that is).

All is not lost, however. By combining specific font names with generic font families,

you can create documents that come out, if not exact, at least close to your intentions.

To continue the previous example, the following markup tells a user agent to use Georgia

if it’s available, and to use another serif font if it’s not.

h1 {font-family: Georgia, serif;}

If a reader doesn’t have Georgia installed but does have Times, the user agent might use

Times for h1 elements. Even though Times isn’t an exact match to Georgia, it’s probably

close enough.

For this reason, I strongly encourage you to always provide a generic family as part of

any font-family rule. By doing so, you provide a fallback mechanism that lets user

agents pick an alternative when they can’t provide an exact font match. Here are a few

more examples:

h1 {font-family: Arial, sans-serif;}

h2 {font-family: Charcoal, sans-serif;}

p {font-family: 'Times New Roman', serif;}

address {font-family: Chicago, sans-serif;}

If you’re familiar with fonts, you might have a number of similar fonts in mind for

displaying a given element. Let’s say that you want all paragraphs in a document to be

displayed using Times, but you would also accept Times New Roman, Georgia, New

Century Schoolbook, and New York (all of which are serif fonts) as alternate choices.

First, decide the order of preference for these fonts, and then string them together with

commas:

p {font-family: Times, 'Times New Roman', 'New Century Schoolbook', Georgia,

'New York', serif;}

Based on this list, a user agent will look for the fonts in the order they’re listed. If none

of the listed fonts are available, then it will simply pick an available serif font.

Using quotation marks

You may have noticed the presence of single quotes in the previous example, which we

haven’t seen before. Quotation marks are advisable in a font-family declaration only

if a font name has one or more spaces in it, such as “New York,” or if the font name

includes symbols such as # or $. Thus, a font called Karrank% should probably be quoted:

h2 {font-family: Wedgie, 'Karrank%', Klingon, fantasy;}

If you leave off the quotation marks, there is a chance that user agents will ignore that

particular font name altogether, although they’ll still process the rest of the rule.

Font Families | 5

www.it-ebooks.info

Note that the quoting of a font name containing a symbol is not actually required any

more. Instead, it’s recommended, which is as close to describing “best practices” as the

CSS specification ever really gets. Similarly, it is recommended that you quote a font

name containing spaces, though again, this is generally unnecessary in modern user

agents. As it turns out, the only required quotation is for font names that match accepted

font-family keywords. Thus, if you call for a font whose actual name is “cursive,” you’ll

definitely need to quote it in order to distinguish it from the value keyword cursive:

h2 {font-family: Author, "cursive", cursive;}

Obviously, font names that use a single word (that doesn’t conflict with any of the key‐

words for font-family) need not be quoted, and generic family names (serif, mono

space, etc.) should never be quoted when they refer to the actual generic families. If you

quote a generic name, then the user agent will assume that you are asking for a specific

font with that name (for example, “serif”), not a generic family.

As for which quotation marks to use, both single and double quotes are acceptable.

Remember that if you place a font-family rule in a style attribute, which you generally

shouldn’t, you’ll need to use whichever quotes you didn’t use for the attribute itself.

Therefore, if you use double quotes to enclose the font-family rule, then you’ll have

to use single quotes within the rule, as in the following markup:

p {font-family: sans-serif;} /* sets paragraphs to sans-serif by default */

If you use double quotes in such a circumstance, they interfere with the attribute syntax,

as you can see in Figure 3.

Figure 3. The perils of incorrect quotation marks

6 | Fonts

www.it-ebooks.info

剩余67页未读，继续阅读

nini6612

粉丝: 0
资源: 2

CSS Font教程：设计与应用指南

css----中文教程

HTML-CSS-JS教程用法说明

JavaWeb新版教程-html&CSS-L和CSS-font标签.avi

html5开发必备--Font-Awesome教程

CSS--样式表简单教程

毕向东HTML-CSS-JavaScript教程笔记详解：基础与标签解析

CSS-教程(精髓版).docx

print-css-rocks:CSS Paged Media教程和工具回顾（print-css.rocks的存储库）

HTML-CSS-Tutorial:HTML和CSS教程源代码-css source code

HTML-and-CSS-Tutorial-for-2021---COMPLETE-Crash-Course-:设计课程教程

最新资源