字体设计 css_CSS3字体设计简介

字体设计 css

使用@ font-face的Web字体 (Web Fonts with @font-face)

Since the early days of the Web, designers have been dreaming of creating sites with beautiful typography. But, as we know all too well, browsers are limited to rendering text in the fonts the user has installed on their system. In practical terms, this has limited most sites to a handful of fonts: Arial, Verdana, Times, Georgia, and a few others.

从Web的早期开始，设计人员就梦想着创建具有漂亮字体的网站。但是，众所周知，浏览器仅限于以用户在系统上安装的字体呈现文本。实际上，这将大多数站点限制为少数几种字体：Arial，Verdana，Times，Georgia等。

Over the years, we have come up with a number of clever workarounds for this problem. We created JPEGs and PNGs for site titles, logos, buttons, and navigation elements. When those elements required additional states or variants, we created even more images, or image sprites to ensure the page stayed snappy and responsive. Whenever the design or text changed, all those images had to be recreated.

多年来，我们针对此问题提出了许多巧妙的解决方法。我们为网站标题，徽标，按钮和导航元素创建了JPEG和PNG。当这些元素需要其他状态或变体时，我们创建了更多图像或图像精灵，以确保页面保持活泼和响应。每当设计或文本更改时，都必须重新创建所有这些图像。

This can be an acceptable solution for some elements on a page, but it’s just unrealistic to expect a designer to handcraft the title of every new article in Photoshop and then upload it to the site. So, for key page elements that need to change frequently, we were stuck with those same few fonts.

对于页面上的某些元素来说，这可能是可以接受的解决方案，但是期望设计人员在Photoshop中手工制作每篇新文章的标题，然后将其上传到网站上，这是不现实的。因此，对于需要经常更改的关键页面元素，我们只能使用那些相同的几种字体。

To fill this typographic void, some very cool font embedding scripts were created, like sIFR, based on Flash and JavaScript, and the canvas-based Cufón. While these methods have been a great stopgap measure, allowing us to include our own fonts, they had severe drawbacks. Sometimes they were tricky to implement, and they required that JavaScript be enabled and, in the case of sIFR, the Flash plugin be installed. In addition, they significantly slowed the page’s download and rendering.

为了填补这种印刷上的空白，创建了一些非常酷的字体嵌入脚本，例如基于Flash和JavaScript的sIFR，以及基于画布的Cufón。尽管这些方法是一个很好的权宜之计，可以让我们包括自己的字体，但它们也有严重的缺陷。有时它们很难实现，并且它们要求启用JavaScript，并且对于sIFR，需要安装Flash插件。此外，它们大大减慢了页面的下载和渲染速度。

Fortunately, there’s now a better way: @font-face is a pure CSS solution for embedding fonts—and it’s supported on every browser with any kind of market share, from IE6 on up.

幸运的是，现在有了更好的方法： @font-face是用于嵌入字体的纯CSS解决方案-从IE6开始，具有各种市场份额的每种浏览器均支持该解决方案。

实施@ font-face (Implementing @font-face)

@font-face is one of several CSS at-rules, like @media, @import, @page, and the one we’ve just seen, @keyframes. At-rules are ways of encapsulating several rules together in a declaration to serve as instructions to the browser’s CSS processor. The @font-face at-rule allows us to specify custom fonts that we can then include in other declaration blocks.

@font-face是几个CSS的一个在规则 ，如@media ， @import ， @page ，我们刚刚看到的一个， @keyframes 。规则是将多个规则封装在声明中以充当对浏览器CSS处理器的指令的方法。 @font-face规则允许我们指定自定义字体，然后可以将其包含在其他声明块中。

To include fonts using @font-face, you have to:

要使用@font-face包含字体，您必须：

load the font file onto your servers in a variety of formats to support all the different browsers
将字体文件以各种格式加载到服务器上，以支持所有不同的浏览器
name, describe, and link to that font in an @font-face rule
在@font-face规则中命名，描述并链接到该字体
include the font’s name in a font-family property value, just as you would for system fonts
就像在系统字体中一样，将字体名称包含在font-family属性值中

You already know how to upload a file onto a server, so we’ll discuss the details of the various file types in the next section. For now, we’ll focus on the second and third steps so that you can become familiar with the syntax of @font-face.

您已经知道如何将文件上传到服务器，因此在下一节中我们将讨论各种文件类型的详细信息。现在，我们将专注于第二步和第三步，以便您可以熟悉@font-face的语法。

Here’s an example of an @font-face block:

这是@font-face块的示例：

@font-face {
font-family: 'fontName';
src: source;
font-weight: weight;
font-style: style;
}

The font family and source are required, but the weight and style are optional.

字体系列和来源是必需的，但是粗细和样式是可选的。

You need to include a separate @font-face at-rule for every font you contain in your site. You’ll also have to include a separate at-rule for each variation of the font—regular, thin, thick, italic, black, and so on.

您需要为网站中包含的每种字体包含一个单独的@font-face规则。您还必须为字体的每种变体(常规，细，粗，斜体，黑色等)包含一个单独的规则。

The font-family part of the @font-face at-rule declaration is slightly different from the font-family property with which you’re already familiar. In this case, we’re declaring a name for our font, rather than assigning a font with a given name to an element. The font name can be anything you like—it’s only a reference to a font file, so it needn’t even correspond to the name of the font. Of course, it makes sense to use the font’s name to keep your CSS readable and maintainable. It’s good to settle on a convention and stick to it for all your fonts.

该font-family的一部分@font-face在规则的声明是从稍微不同的font-family与你已经熟悉的属性。在这种情况下，我们要为字体声明一个名称，而不是将具有给定名称的字体分配给元素。字体名称可以是任何您喜欢的名称，它只是对字体文件的引用，因此甚至不需要与字体名称相对应。当然，使用字体名称来保持CSS的可读性和可维护性是有意义的。最好约定一个约定并坚持使用所有字体。

@font-face {
font-family: 'LeagueGothic';
}
@font-face {
font-family: 'AcknowledgementMedium';
}

声明字体来源 (Declaring Font Sources)

Now that we have a skeleton laid out for our @font-face rules, and we’ve given each of them a name, it’s time to link them up to the actual font files. The src property can take several formats. Additionally, you can declare more than one source. If the browser fails to find the first source, it will try for the next one, and so on, until it either finds a source, or it runs out of options.

既然我们已经为@font-face规则设置了框架，并且为它们指定了名称，那么现在是将它们链接到实际字体文件的时候了。 src属性可以采用几种格式。此外，您可以声明多个来源。如果浏览器找不到第一个来源，它将尝试寻找下一个，依此类推，直到找到一个来源，或者用尽了所有选项。

Let’s add more formats to our League Gothic declaration:

让我们为联赛哥特式宣言添加更多格式：

@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot') format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
}

There are four font sources listed in the code block above. The first declaration is an EOT font declaration, a proprietary format for Internet Explorer, and the only file type understood by IE4–8.

上面的代码块中列出了四个字体来源。第一个声明是EOT字体声明，是Internet Explorer的专有格式，并且是IE4-8理解的唯一文件类型。

Then we define the WOFF (Web Open Font Format, an emerging standard), OTF (OpenType), TTF (TrueType), and SVG (Scalable Vector Graphics) font files. While most desktop browsers will use one of the first three declarations, be sure to include the SVG format, which was originally the only format supported by the iPhone.

然后，我们定义WOFF(Web开放字体格式，一种新兴标准)，OTF(OpenType)，TTF(TrueType)和SVG(可缩放矢量图形)字体文件。尽管大多数桌面浏览器将使用前三个声明之一，但请确保包括SVG格式，该格式最初是iPhone支持的唯一格式。

Adding these extra font formats ensures support for every browser, but unfortunately it will cause problems in versions of IE older than IE9. Those browsers will see everything between the first url(' and the last ') as one URL, so will fail to load the font. At first, it would seem that we’ve been given the choice between supporting IE and supporting every other browser, but fortunately there’s a solution. Detailed in a FontSpring blog post, it involves adding a query string to the end of the EOT URL. This tricks the browser into thinking that the rest of the src property is a continuation of that query string, so it goes looking for the correct URL and loads the font:

添加这些额外的字体格式可确保对每个浏览器的支持，但是不幸的是，这将在IE9之前的版本中引起问题。这些浏览器会将第一个url('和最后一个')之间的所有内容视为一个URL，因此将无法加载字体。最初，似乎已经在支持IE和支持其他所有浏览器之间做出了选择，但是幸运的是有一个解决方案。 FontSpring博客文章中对此进行了详细介绍，它涉及在EOT URL的末尾添加一个查询字符串。这使浏览器欺骗，以为src属性的其余部分是该查询字符串的延续，因此它会寻找正确的URL并加载字体：

@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
}

This syntax has one potential point of failure: IE9 has a feature called compatibility mode, in which it will attempt to render pages the same way IE7 or 8 would. This was introduced to prevent older sites appearing broken in IE9’s more standards-compliant rendering. However, IE9 in compatibility mode doesn’t reproduce the bug in loading the EOT font, so the above declaration will fail. To compensate for this, you can add an additional EOT URL in a separate src property:

此语法有一个潜在的故障点：IE9具有一种称为兼容性模式的功能，在该模式中，它将尝试以与IE7或8相同的方式呈现页面。这样做是为了防止较旧的网站在IE9的更符合标准的渲染中出现损坏。但是，兼容模式下的IE9不会重现加载EOT字体的错误，因此上述声明将失败。为了弥补这一点，您可以在单独的src属性中添加其他EOT URL：

@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot');
src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
}

This may be an unnecessary precaution, as generally a user would need to deliberately switch IE to compatibility mode while viewing your site for this issue to arise. Alternatively, you could also force IE out of compatibility mode by adding this meta element to your document’s head:

这可能是不必要的预防措施，因为通常用户在查看您的站点时需要故意将IE切换到兼容模式，以防止出现此问题。另外，您也可以通过将此meta元素添加到文档的head来强制IE退出兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

It’s also possible to achieve the same result by adding an extra HTTP header; this can be done with a directive in your .htaccess file (or equivalent):

通过添加一个额外的HTTP标头也可以达到相同的结果。这可以通过.htaccess文件(或等效文件)中的指令来完成：

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge"
</IfModule>
</IfModule>

字体属性描述符 (Font Property Descriptors)

Font property descriptors—including font-style, font-variant, font-weight, and others—can optionally be added to define the characteristics of the font face, and are used to match styles to specific font faces. The values are the same as the equivalent CSS properties:

可以选择添加字体属性描述符(包括font-style ， font-variant ， font-weight等)来定义字体的特征，并用于将样式与特定的字体匹配。这些值与等效CSS属性相同：

@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot');
src: url('../fonts/League_Gothic-webfont.eot?#iefix')format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
font-weight: bold;
font-style: normal;
}

Again, the behavior is different from what you’d expect. You are not telling the browser to make the font bold; rather, you’re telling it that this is the bold variant of the font. This can be confusing, and the behavior can be quirky in some browsers.

同样，该行为与您期望的不同。您不是在告诉浏览器将字体加粗。相反，您告诉它这是字体的粗体变体。这可能会造成混淆，并且某些浏览器中的行为可能很古怪。

However, there is a reason to use the font-weight or font-style descriptor in the @font-face rule declaration. You can declare several font sources for the same font-family name:

但是，有理由在@font-face规则声明中使用font-weight或font-style描述符。您可以为同一font-family名称声明多个字体来源：

@font-face {
font-family: 'CoolFont';
font-style: normal;
src: url(fonts/CoolFontStd.ttf);
}
@font-face {
font-family: 'CoolFont';
font-style: italic;
src: url(fonts/CoolFontItalic.ttf);
}
.whichFont {
font-family: 'CoolFont';
}

Notice that both at-rules use the same font-family name, but different font styles. In this example, the .whichFont element will use the CoolFontStd.ttf font, because it matches the style given in that at-rule. However, if the element were to inherit an italic font style, it would switch to using the CoolFontItalic.ttf font instead.

请注意，两个规则都使用相同的字体系列名称，但使用不同的字体样式。在此示例中， .whichFont元素将使用CoolFontStd.ttf字体，因为它与该规则中给定的样式匹配。但是，如果元素要继承斜体字体样式，它将改为改用CoolFontItalic.ttf字体。

Unicode范围 (Unicode Range)

Also available is the unicode-range descriptor, which is employed to define the range of Unicode characters supported by the font. If this property is omitted, the entire range of characters included in the font file will be made available. We won’t be using this on our site, but here’s an example of what it looks like:

unicode-range描述符也可用，该描述符用于定义字体支持的Unicode字符范围。如果省略此属性，则字体文件中包含的整个字符范围将变为可用。我们不会在我们的网站上使用它，但是下面是一个示例：

unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;

应用字体 (Applying the Font)

Once the font is declared using the @font-face syntax, you can then refer to it as you would any normal system font in your CSS: include it in a “stack” as the value of a font-family property. It’s a good idea to declare a fallback font or two in case your embedded font fails to load.

一旦使用@font-face语法声明了@font-face ，就可以像在CSS中使用任何普通系统字体一样引用它：将其作为font-family属性的值包含在“堆栈”中。最好声明一个或两个后备字体，以防嵌入字体加载失败。

h1 {
text-shadow: #fff 1px 1px;
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
text-transform: uppercase;
line-height: 1;
}

Our two embedded fonts are used in a number of different places in our stylesheet, but you get the idea.

我们的两种嵌入字体在样式表中的许多不同地方都使用过，但是您可以理解。

对@ font-face进行故障排除 (Troubleshooting @font-face)

If your fonts are failing to display in any browser, the problem could very well be the path in your CSS. Check to make sure that the font file is actually where you expect it to be. Browser-based debugging tools –such as the Web Inspector in WebKit, Dragonfly in Opera, or the Firebug Firefox extension — will indicate if the file is missing.

如果您的字体无法在任何浏览器中显示，则问题很可能是CSS中的路径。检查以确保字体文件确实在您期望的位置。基于浏览器的调试工具(例如WebKit中的Web Inspector，Opera中的Dragonfly或Firebug Firefox扩展)将指示文件是否丢失。

If you’re sure that the path is correct and the file is where it’s supposed to be, make sure your server is correctly configured to serve up the fonts. Windows IIS servers won’t serve up files if they’re unable to recognize their MIME type, so try adding WOFF and SVG to your list of MIME types (EOT and TTF should be supported out of the box):

如果您确定路径正确并且文件位于预期的位置，请确保已正确配置服务器以提供字体。如果Windows IIS服务器无法识别其MIME类型，则它们将不会提供文件，因此请尝试将WOFF和SVG添加到您的MIME类型列表中(开箱即用地支持EOT和TTF)：

.woff  application/x-font-woff
.svg   image/svg+xml

Finally, some browsers require that font files be served from the same domain as the page they’re embedded on.

最后，某些浏览器要求字体文件与其嵌入页面的域相同。

This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

这是Alexis Goldstein，Louis Lazaris和Estelle Weyl撰写的HTML5＆CSS3 for Real World的摘录。

翻译自: https://www.sitepoint.com/introduction-css3-font-face-design/

字体设计 css