web使用字体包_如何使用跨浏览器Web字体，第2部分

web使用字体包

介绍 (Introduction)

In part 1 of my article (https://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/) I introduced web font syntax, looking at how basic @font-face and font-family syntax can work together to embed custom fonts on your web pages, and the slightly more complex cross browser reality.

在我的文章的第1部分( https://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ )中，我介绍了Web字体语法，探讨了@ font-face的基本原理字体家族语法和字体家族语法可以一起使用，以将自定义字体嵌入到您的网页中，以及稍微复杂一些的跨浏览器现实。

In this part we'll go further, looking at common real world issues associated with web fonts, and comparing free and paid options for hosting your fonts.

在这一部分中，我们将进一步研究与网络字体相关的现实世界中常见的问题，并比较托管字体的免费和付费选项。

The third part will look at some of the more advanced CSS font features, such as hyphenate and font-feature-settings.

第三部分将介绍一些更高级CSS字体功能，例如连字符和字体功能设置。

跨浏览器Web字体–问题 (Cross Browser Web Fonts – Problems)

So you've got your fonts up on your server and your cross browser @font-face code in place. Check. But your problems might not be over. In this section I'll look at a few further problems you might encounter, along with suggested solutions.

因此，您已经在服务器上设置了字体，并且已经安装了跨浏览器的@ font-face代码。检查一下但是您的问题可能还没有结束。在本节中，我将介绍您可能会遇到的其他一些问题以及建议的解决方案。

渲染效果不好 (Bad rendering)

Testing across browsers is paramount: even if you don't fall foul of any other problem, the rendering of your fonts might just be plain bad, especially in IE and Chrome/Blink-based Opera on Windows. This can be for a variety of reasons, but the main ones are:

在浏览器上进行测试是至关重要的：即使您没有遇到任何其他问题，字体的呈现也可能很糟糕，尤其是在Windows上的IE和基于Chrome / Blink的Opera中。这可能有多种原因，但是主要的原因是：

Use of ClearType: ClearType is a Windows technology that uses sub-pixel rendering to make fonts appear smoother. If not enabled, fonts can look really bad, although it is turned on by default on most Windows systems (later than XP.) It is still generally not as effective as Mac OSX anti-aliasing. Note that other browsers on Windows don't tend to suffer as much as they tend to have their own sub-pixel rendering systems. For more information, read Jon Tan's "Display type and the raster wars" (http://v1.jontangerine.com/log/2008/11/display-type-and-the-raster-wars)

ClearType的使用：ClearType是Windows技术，它使用亚像素渲染来使字体显得更平滑。如果未启用字体，则字体看起来确实很糟糕，尽管在大多数Windows系统(比XP更高)上默认情况下都将其打开。它通常仍然不如Mac OSX抗锯齿有效。请注意，Windows上的其他浏览器并没有遭受拥有自己的亚像素渲染系统的痛苦。有关更多信息，请阅读乔恩·谭(Jon Tan)的“显示类型和栅格战争”( http://v1.jontangerine.com/log/2008/11/display-type-and-the-raster-wars )
Google Web Fonts rendering has been messed up in the Blink rendering engine for a while now due to various reasons: check out the following bug report for the saga (https://code.google.com/p/chromium/issues/detail?id=137692)

由于各种原因，Google Web字体渲染在Blink渲染引擎中已经混乱了一段时间：请查看以下有关Saga的错误报告( https://code.google.com/p/chromium/issues/detail？ id = 137692 )
Some fonts (most likely free ones) can have a low number of glyphs available, meaning that when you use a character in your content for which a glyph is not available in the font you are using, you will get a nasty rendering surprise such as blank spaces of the dreaded ugly squares of doom, instead of the characters you expected. To mitigate such negative effects, you should make sure you always include a fall-back font in the stack, even if you are using a web font, for example

某些字体(很可能是免费字体)可用的字形数量很少，这意味着当您在内容中使用字符时，如果所用字体中的字形不可用，则会出现令人讨厌的渲染提示，例如可怕的厄运丑陋正方形的空白，而不是您期望的字符。为了减轻这种负面影响，例如，即使使用的是Web字体，也应确保在堆栈中始终包含备用字体。

font-family: 'Abril Fatface Regular', arial, sans-serif;

FOUT (FOUT)

FOUT stands for Flash of Unstyled Text, and — while it isn't so much of a problem anymore, only affecting early Firefox and Opera versions and IE < 10 — you might still come across it and want to do something about it. This is when you get unstyled text appearing on your page while the HTML has loaded but the web font hasn't yet done so.

FOUT代表Flash of Unstyled Text，尽管不再是一个大问题，它只影响Firefox和Opera早期版本以及IE <10，但您仍然可能会遇到它并希望对此做一些事情。这是当HTML加载但网页字体尚未加载时，页面上出现无样式文本的时候。

There are a number of font-related libraries and techniques available to deal with FOUT, many of which are mentioned in Paul Irish's "Fighting the @font-face FOUT" (http://www.paulirish.com/2009/fighting-the-font-face-fout/). I personally found the most reliable technique to be Google's Web Font loader (https://developers.google.com/fonts/docs/webfont_loader). This contains JavaScript that detects whether your web fonts have loaded yet and applies classes to the document's tag to indicate their status. You could use these to hide elements until their fonts have loaded, for example:

有许多与字体相关的库和技术可用于处理FOUT，其中许多都在Paul Irish的“与@ font-face FOUT战斗”中提到( http://www.paulirish.com/2009/fighting-the -font-face-fout / )。我个人发现最可靠的技术是Google的网络字体加载器( https://developers.google.com/fonts/docs/webfont_loader )。它包含JavaScript，该JavaScript可检测您的Web字体是否已加载，并将类应用于文档的标记以指示其状态。您可以使用它们来隐藏元素，直到它们的字体加载完毕为止，例如：

.wf-loading h1 {
visibility: hidden;
}

Then when the required font has loaded, a specific class is added to the tag to indicate this, and you can update the element's display as appropriate:

然后，在加载了所需的字体后，会将特定的类添加到标记中以表明这一点，然后您可以适当地更新元素的显示：

.wf-lobster-n4-active h1 {
visibility: visible;
font-family: lobster;
}

高带宽 (High bandwidth)

Adding web fonts to your page will obviously mean a performance hit, which will be negligible in many cases as a web font will probably be around 50-100KB (as a very rough guess!) You should limit the number of fonts you use on each page for both bandwidth and performance reasons, but even a single font can be very large, especially if it is a CJK font (http://en.wikipedia.org/wiki/CJK) that can have thousands of glyphs inside it.

向页面中添加Web字体显然意味着性能下降，在很多情况下，这可以忽略不计，因为Web字体可能约为50-100KB(很粗略的猜测！)您应该限制每种字体的使用数量出于带宽和性能方面的考虑，页面即使很大，但即使是单个字体也可能非常大，特别是如果它是一种CJK字体( http://en.wikipedia.org/wiki/CJK )里面可以包含数千个字形。

To mitigate this problem, you can either:

要缓解此问题，您可以：

Create a modified font file containing only the characters you need. To do this, you need a font editor such as Font Forge (http://fontforge.org/).

创建一个仅包含所需字符的修改后的字体文件。为此，您需要一个字体编辑器，例如Font Forge( http://fontforge.org/ )。
Specify only the characters you want to use out of the font file by using the unicode-range property inside your @font-face block that we saw in the last part of my series. For example:
通过使用在我们系列最后一部分中看到的@ font-face块内的unicode-range属性，仅指定字体文件中要使用的字符。例如：

@font-face {
font-family: 'Abril Fatface';
src: url("AbrilFatface.otf");
unicode-range: U+0026;
}

This specifies to only load the ampersand character from the font (see https://www.w3.org/TR/css3-fonts/#unicode-range-desc for more info on specifying multiple characters, including ranges). unicode-range is supported well across modern browsers, with the notable exception being Firefox (we're working on it!). If you want to use unicode-range on Firefox or older browsers, you could use a polyfill such as jquery-unicode-range (https://github.com/infojunkie/jquery-unicode-range).

这指定仅从字体中加载“＆”字符(有关指定多个字符(包括范围)的更多信息，请参见https://www.w3.org/TR/css3-fonts/#unicode-range-desc )。 unicode-range在现代浏览器中都有很好的支持，但著名的例外是Firefox(我们正在努力！)。如果要在Firefox或更旧的浏览器上使用unicode-range，可以使用诸如jquery-unicode-range( https://github.com/infojunkie/jquery-unicode-range )之类的polyfill。

浏览器错误和特质 (Browser bugs and idiosyncracies)

There are a few browser bugs I also thought I'd also mention, for interest's sake.

出于兴趣，我也想提到一些浏览器错误。

下载EOT时出现IE9错误 (IE9 bug with downloading EOT)

If you use the bulletproof @font-face syntax we explored in the last article, IE9 and later will download the EOT version of the font and use that, which is a bit of a pain.

如果使用上一篇文章中探讨的防弹@ font-face语法，则IE9和更高版本将下载该字体的EOT版本并使用该字体，这有点麻烦。

跨域字体失败 (Cross domain font fail)

As per the spec, you can't load fonts from a different domain to your CSS (although Chrome, Safari and Opera incorrectly allow this.) To get around this restriction you could consider using CORS (see http://dev.opera.com/articles/view/dom-access-control-using-cross-origin-resource-sharing/)

根据规范，您不能将字体从其他域加载到CSS(尽管Chrome，Safari和Opera错误地允许这样做。)要解决此限制，您可以考虑使用CORS(请参阅http：//dev.opera。 com / articles / view / dom-access-control-using-cross-origin-resource-sharing / )

IE 6-8下载已声明且未使用的字体 (IE 6-8 downloads fonts that are declared and not used)

You should never declare @font-face rules for fonts that you don't end up using on your page; IE6-8 will download them all anyway.

永远不要为页面上最终没有使用的字体声明@ font-face规则； IE6-8仍将全部下载它们。

从IIS服务器提供字体 (Serving fonts from an IIS server)

If you are serving fonts from an IIS server, you'll need to add ‘.woff’ with a MIME type of ‘application/x-font-woff’ to your IIS installation, even though WOFF doesn't have a MIME-type. IIS refuses to serve anything that it doesn't have a MIME type for.

如果要从IIS服务器提供字体，则需要将MIME类型为“ application / x-font-woff”的“ .woff”添加到IIS安装中，即使WOFF没有MIME类型也是如此。。 IIS拒绝提供任何没有MIME类型的内容。

自助托管与托管服务 (Self hosting versus hosted services)

With @font-face quirks and bugs discussed, let's round this article off with a brief look at some different options for acquiring and hosting fonts. Self-hosting fonts is more costly in terms of bandwidth, and more fiddly to set up, but you tend to get more precise control over how you are implementing fonts on your sites. On the other hand, using a hosted service is quicker to set up (the service deals with all the cross browser quirks, etc. for you) and someone else is hosting the fonts for you.

在讨论了@ font-face的怪癖和错误之后，我们通过简要介绍获取和托管字体的一些不同选项来结束本文。自托管字体的带宽成本更高，设置起来也更麻烦，但是您倾向于更精确地控制在网站上实现字体的方式。另一方面，使用托管服务可以更快地进行设置(该服务可以为您处理所有跨浏览器的怪癖等)，而其他人则可以为您托管字体。

Note: some of the mechanisms here are free, and some are paid. There are a number of high quality free font resources available, but you get what you pay for: even high quality free fonts tend to suffer in some way, either by having a limited character set or variants available, or simply by being overused on the web. If you want something deep and truly original for your publication, you are better off looking at a paid solution.

注意：这里有些机制是免费的，有些则是付费的。有许多可用的高质量免费字体资源，但您可以自己买单：高质量的免费字体往往会在某种程度上受到损害，要么是因为字符集或变体有限，要么就是因为过度使用了字体。网络。如果您想为出版物提供深刻而真实的内容，最好选择付费解决方案。

Free font sources I'd recommend are: Font Squirrel (http://www.fontsquirrel.com/), Da Font (http://www.dafont.com/), League of Movable Type (http://www.theleagueofmoveabletype.com/) and Lost Type (http://www.losttype.com/browse/). Best Free Fonts for Designers by Jad Limcaco (http://www.smashingmagazine.com/2011/07/19/best-free-fonts-designers/) has some more suggestions and good advice.

我推荐的免费字体来源包括：Font Squirrel( http://www.fontsquirrel.com/ )，Da Font( http://www.dafont.com/ )，Movable Type League( http：// www。 theleagueofmoveabletype.com/ )和丢失的类型( http://www.losttype.com/browse/ )。 Jad Limcaco( http://www.smashingmagazine.com/2011/07/19/best-free-fonts-designers/ )的“最佳设计师免费字体”有更多建议和好的建议。

Paid font sources I'd recommend: Hoefler and Frere-Jones (http://www.typography.com/), Linotype (http://www.linotype.com/) and House Industries (http://www.houseind.com/). There are many other good sources too!

我建议付费字体来源：Hoefler和Frere-Jones( http://www.typography.com/ )，Linotype( http://www.linotype.com/ )和House Industries( http：//www.houseind .com / )。还有很多其他好的资源！

Google字体 (Google Fonts)

Google Fonts is a free hosted font service, available at http://www.google.com/fonts. This is a great service with reasonable quality fonts, and really easy to use; great for writing quick and dirty demos, and putting together a site on a budget. It suffers from the same troubles as any free font resource: some of the better fonts get overused, and the options you get are quite limited.

Google字体是一项免费的托管字体服务，可从http://www.google.com/fonts获得。这是一项高质量的服务，字体质量合理，而且易于使用。非常适合编写快速而肮脏的演示，并以预算将网站组合在一起。它遭受着与任何免费字体资源相同的麻烦：一些更好的字体被过度使用，并且您获得的选项非常有限。

Paid hosted font services

付费托管字体服务

There are now a number of paid hosted font services, and they all work in a similar fashion. You generally:

现在有许多付费的托管字体服务，并且它们都以类似的方式工作。您通常：

Sign up for the service
注册服务
Specify the domain(s) that you want to use your fonts on
指定要在其上使用字体的域
Specify the fonts you want to use
指定您要使用的字体
Paste some custom CSS and sometimes JavaScript into your site that handles the @font-face and font-family coding
将一些自定义CSS(有时还包括JavaScript)粘贴到处理@ font-face和font-family编码的网站中
Test your font choices in some way or another
以某种方式测试您的字体选择
Pay for the fonts when your sites are put live, usually per font, per site, per year.
当您的网站投入使用时，通常需要按每种字体，每个网站每年支付字体费用。

I have tried a number of these services, but my favourite two are as follows:

我已经尝试了许多这些服务，但是我最喜欢的两个服务如下：

Typekit (https://typekit.com/): an Adobe-owned service, with slightly pricey usage plans that covers multiple sites and font usage, and work out OK for larger scale operations. You can also get a limited free plan that is good enough for testing, but only two fonts at a time.

Typekit( https://typekit.com/ )：Adobe拥有的服务，其使用计划的价格略高，涵盖了多个站点和字体使用情况，并且可以进行较大规模的操作。您还可以获得一个有限的免费计划，足以进行测试，但一次只能使用两种字体。
Font Deck (http://fontdeck.com/): an independent type company from the UK that offers a free plan that allows testing of a number of fonts per site, but only when accessed by a limited number of IP addresses. Production fonts cost around $7.50 per font per year. I like this service marginally more because I've found the testing functionality more useful, and they also offer some nice opentype font features.

Font Deck( http://fontdeck.com/ )：英国的一家独立字体公司，提供免费计划，允许每个站点测试多种字体，但仅在通过有限数量的IP地址进行访问时才可以。量产字体的价格约为每年每种字体$ 7.50。我更喜欢这项服务，因为我发现测试功能更有用，并且它们还提供了一些不错的opentype字体功能。

Note: Dan Eden's Web Font Services: the Good, the Bad, and the Ugly (http://webdesign.tutsplus.com/articles/typography-articles/web-font-services-the-good-the-bad-and-the-ugly/) is a nice article with some further information on web font services.

注意：Dan Eden的网络字体服务：优点，缺点和弊端( http://webdesign.tutsplus.com/articles/typography-articles/web-font-services-the-good-the-bad-and- the-ugly / )是一篇不错的文章，其中包含有关Web字体服务的更多信息。

The benefits are usually apparent when you start to use such services: you'll have access to high quality fonts with full glyph sets and multiple weights and variants on offer. You'll also be able to find opentype fonts with opentype features available such as stylistic swashes and ligatures, which can be utilized on the Web using the nascent font-feature-settings property. This is one thing we'll look at in part 3 of the series.

当您开始使用此类服务时，好处通常显而易见：您将可以访问具有完整字形集以及多种粗细和变体的高质量字体。您还将能够找到具有可用开放式功能的开放式字体，例如风格化斜体和连字，可以使用nascent font-feature-settings属性在Web上使用它们。这是我们将在本系列的第3部分中看到的一件事。

翻译自: https://www.sitepoint.com/use-cross-browser-web-fonts-part-2/

web使用字体包