探索CSS3字体设计新可能：精细操控网络排版

font

需积分: 10 52 浏览量更新于2024-07-19 收藏 10.99MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

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

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

剩余67页未读，继续阅读

sinat_21954747

粉丝: 0
资源: 24

探索CSS3字体设计新可能：精细操控网络排版

simple-typography:简单CSS样式可实现出色的排版

python qt.qpa.fonts: Unable to open default EUDC font: "EUDC.TTE"

在哪里下载TrueType 字体

liberation-mono-fonts = 1:1.07.2-16.el7 is needed by liberation-fonts-1:1.07

flutter 设置思源字体

html+css制作旅游网页免费

提供我一些在线免费艺术字设计网站

在vue中引入外部css链接

deliphi Android 字体列表

Flutter去哪下载字体

springboot项目中使用Apache FOP，给PDFTranscoder配置字体，需要在目录创建什么文件？如何配置？

新闻new css样式

代码报错显示Only supported for TrueType fonts是什么意思

将https://fonts.googleapis.com/css转换为本地路径应该怎么写

function z(t, n) { this.c = t || "https://fonts.googleapis.com/css", this.a = [], this.f = [], this.g = n || "" } 这段代码把https://fonts.googleapis.com/css写成本地路径

删除 iberation-mono-fonts-1:1.07.2-15.el7.noarch

最新资源