css 引用嵌入字体不起用_使用CSS嵌入字体

css 引用嵌入字体不起用

Fonts can also be embedded into web pages: that is, the end-user sees the page text in the font it is meant to be seen in, without needing the requisite typeface in their own fonts folder. However, this has several problems:

字体也可以嵌入到网页中：也就是说，最终用户可以在其自己的fonts文件夹中不需要使用必需的字体，就可以以原本希望使用的字体查看页面文本。 但是，这有几个问题：

1. Only CSS3-aware browsers support this feature. Perhaps surprisingly, Internet Explorer has supported embedded fonts since IE 5.5, via its own proprietary WEFT format.

   仅支持CSS3的浏览器支持此功能。 也许令人惊讶的是，Internet Explorer从IE 5.5开始就通过其专有的WEFT格式支持嵌入式字体。

2. The font used must be available from a server. Local fonts sourced from your own hard-drive will not work.
   使用的字体必须可以从服务器上获得。 从您自己的硬盘驱动器获得的本地字体将不起作用。

3. There has been a vociferous reaction from font foundries to this proposal. Traditionally, in order to see a font on a computer you have had to own it: fonts are software. In some variants of font embedding techniques, you are making the fonts available to everyone, which has legal ramifications.

   字体代工厂对此提议产生了强烈的反响。 传统上，要在计算机上查看字体，您必须拥有它：字体是软件。 在字体嵌入技术的某些变体中，您使字体可供所有人使用，这会产生法律后果 。

4. Embedding a font can add significant size to the page. While a simple font with limited character set coverage might be only 20K in size, a large one, such Helvetica, might weigh in at 2MB or more.
   嵌入字体可能会增加页面的大小。 虽然一种具有有限字符集覆盖范围的简单字体的大小可能仅为20K，但是大型字体(例如Helvetica)的大小可能会达到2MB或更大。

There are a number of solutions in place to address these problems. The WOFF format contains ownership information, addressing some of the concerns of font designers raised in point 3.

有许多解决这些问题的解决方案。 WOFF格式包含所有权信息，解决了第3点中提出的字体设计者的一些担忧。

All of this is still irrelevant and unnecessary if you are only using this particular font once, as in a logo. If that is the case, it is far more practical to make the logo into a bitmapped image, rather than embedding the font.

如果只使用一次这种特定字体(如徽标)，那么所有这些仍然无关紧要，也没有必要。 在这种情况下，将徽标制作为位图图像而不是嵌入font更为实用。

Assuming that you wish to use a particular font in body copy, how do CSS embedded fonts work?

假设您希望在正文中使用特定字体，那么CSS嵌入字体如何工作？

The CSS selector we are about to use, @font-face, recognizes fonts in OpenType (.otf), TrueType(.ttf), Web Open Font Format (.woff), Scalable Vector Graphics (.svg) and Embedded Open Type (.eot) formats. Fonts in other formats will need to be converted. If your chosen font is not in one of these formats you can use an application such as DfontSplitter or Transtypeto to convert it. Alternatively you could use a service, such as OnlineFontConverter.

我们将要使用的CSS选择器 @font-face识别OpenType( .otf )，TrueType( .ttf )，Web Open Font Format( .woff )，可缩放矢量图形( .svg )和Embedded Open Type( .eot )格式。 其他格式的字体将需要转换。 如果您选择的字体不是这些格式之一，则可以使用DfontSplitter或Transtype之类的应用程序进行转换。 另外，您可以使用服务，例如OnlineFontConverter 。

Once you have your chosen font in the correct format, you need to make it available to your web page. There are several ways of doing this: using a separate font hosting service, or by placing the font on your own server. (Of course this assumes you have the right to do either – I am using the font DejaVu Serif, an open source derivation of Bitstream Vera, for this demonstration.)

选择正确格式的字体后，需要将其提供给您的网页。 有几种方法可以执行此操作：使用单独的字体托管服务 ，或将字体放在您自己的服务器上 。 (当然，这假设您有权执行任何一项操作–在本演示中，我使用的字体是DejaVu Serif ，它是Bitstream Vera的开源衍生版本。)

For this example, I’ll place a copy of DejaVuSerif.ttf in a fonts directory, located in my site’s assets folder. (Refer to this earlier entry if you need a refresher on site structure and organization).

对于此示例，我将DejaVuSerif.ttf的副本放置在站点资产文件夹中的fonts目录中。 (如果需要有关站点结构和组织的复习，请参考此早期条目 )。

Next, we have to refer to the font itself. This is typically done as the first declaration in a linked style sheet:

接下来，我们必须参考字体本身。 通常，这是链接样式表中的第一个声明：

@font-face {
	font-family: DéjàVu Serif;
	src: url(fonts/DejaVuSans.ttf)
}

The first property is used much as font-family is used in standard CSS: it is the name of the font as it appears in the drop-down menu of a word processor on our computer, assuming we have the font correctly installed. In CSS3, the font name used is a reference. We could (and will) set this to anything we like, but using the name of the font makes the most sense.

第一个属性的用法与标准CSS中的font-family用法相同：它是字体的名称，它出现在我们计算机上文字处理器的下拉菜单中，假设我们正确安装了字体。 在CSS3中，使用的字体名称是reference 。 我们可以(并将)设置为我们喜欢的任何字体，但是使用字体名称最有意义。

Note that in IE10 or earlier, the font-family name must be less than 32 characters long (including any quotes, if you use them); otherwise, IE will use the fallback font.

请注意，在IE10或更早版本中， font-family名称的长度必须少于32个字符(如果使用引号，则包括引号)； 否则，IE将使用后备字体。

The next property used in the declaration, src, points the browser to where the font resides on the server. Its value has the same format as background-image, list-style-image, and other properties we have used in the past.

声明中使用的下一个属性src，将浏览器指向字体在服务器上的位置。 它的值与background-image ，list-style-image和我们过去使用的其他属性的格式相同。

We then use the reference name in our font declaration, as the first choice in a typical font stack:

然后，我们在字体声明中使用引用名称，作为典型字体堆栈中的首选：

h2 {
	font-family: DéjàVu Serif;
}

It makes sense to extend this using the standard CSS font stack techniques we have discussed earlier. In this case, the stack I would suggest is:

使用我们前面讨论的标准CSS字体栈技术来扩展它是有意义的。 在这种情况下，我建议的堆栈是：

h2 {
	font-family: DéjàVu Serif, Bitstream Vera Serif, Georgia, Hoefler Text, Times New Roman, Times, serif;
}

Finally, upload the chosen font to the fonts folder on your server. Then upload a page that uses the <h2> element to a server, along with an associated stylesheet, and test the page.

最后，将所选字体上载到服务器上的fonts文件夹中。 然后将使用<h2>元素的页面以及关联的样式表上传到服务器，并测试该页面。

This approach has one problem: under this declaration, a CSS3-aware browser will always download the font from the server, even if the user has their own copy of the typeface in the fonts directory of their computer. To get around this, we can specify a preference to look in the local fonts folder first; if the font cannot be found there, then download the font:

这种方法有一个问题：本声明下，一个CSS3感知浏览器总是从服务器下载字体，即使用户都有自己的自己的电脑的字体目录下的字体的副本。 为了解决这个问题，我们可以指定一个首选项，以便首先查看本地字体文件夹。 如果字体不能被发现那里， 然后下载的字体：

@font-face {
	font-family: DéjàVu Serif;
	src: local("DejaVu Serif"), url(fonts/DejaVuSans.ttf);
}

This declaration gracefully degrades in CSS. A browser only aware of CSS Levels 1 and 2 will look for fonts present in the user’s font folder and find the first font that matches the order given in the font stack. If the browser is supports embedded fonts, it will download and use the font from the server (the user will not retain a permanent copy of the font).

此声明在CSS中正常降级。 仅了解CSS级别1和2的浏览器将查找用户的字体文件夹中存在的字体，并找到与字体堆栈中给定顺序匹配的第一个字体。 如果浏览器支持嵌入式字体，它将从服务器下载并使用该字体(用户将不会保留该字体的永久副本)。

To test that the font is being used correctly, change the font-family reference name in the stylesheet to a word that does not refer to any fonts installed on your system:

要测试字体是否被正确使用，请将样式表中的字体系列引用名称更改为不引用系统上安装的任何字体的单词：

@font-face { font-family: "foobar";
	src: url(fonts/DejaVuSans.ttf);
}
h2 {
	font-family: foobar, Bitstream Vera Serif, Georgia, Hoefler Text, Times New Roman, Times, serif ;
}

If the h2 text still appears in the DejaVu Sans font on your page, you have proven that the font is correctly embedded, and is not reading from the fonts directory on your computer. (Of course, you should change it back in the stylesheet after testing this).

如果h2文本仍显示在页面上的DejaVu Sans字体中，则说明您已经正确嵌入了该字体，并且没有从计算机的fonts目录中读取该字体。 (当然，您应该在测试之后将其更改回样式表中)。

翻译自: https://thenewcode.com/91/Embedding-Fonts-With-CSS

css 引用嵌入字体不起用