新的Bulletproof @ font-face语法使用Compass中的数据URI [英] New Bulletproof @font-face syntax using Data URIs in Compass

问题描述

我使用指南针 font-face mixin以及 inline-font-files 和 font-files ，以便创建使用数据URI 创建新的Bulletproof @ Font-Face语法 woff，ttf和otf文件。

I am using compass' font-face mixin along with the inline-font-files and font-files in order to create something along the lines of the The New Bulletproof @Font-Face Syntax using Data URIs for woff, ttf and otf files.

我使用相对URL的eot（由于缺乏IE支持数据URI）和svg文件，（由于#FontName哈希我猜）。 eot文件没有问题，因为有一个参数，但因为 font-face 在Compass中处理svg没有不同于其他格式我根本不能使用 inline-font-files 以包含字体数据，因为这将使得svg版本也内联。

I use relative URLs for eot (due to lack of IE support for data URI) and for svg files, (due to the #FontName hash I guess). The eot file poses no problem since there is a parameter for that, but because font-face in Compass treats svg no different from other formats I simply cannot use inline-font-files to include the font data, since that would make the svg version inline as well.

有一种方法让 font-face 返回如下所示的内容：

Is there a way to make font-face return something like the below:

@font-face {
    font-family: 'PTSans';
    src: url('pts55fwebfont.eot');
    src: url('pts55fwebfont.eot?#iefix') format('embedded-opentype'),
         url('data:WOFF_DATA') format('woff'),
         url('data:TTF_DATA') format('truetype'),
         url('pts55fwebfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

事情是我不知道如何让woff ，otf和ttf版本使用数据URI，同时仍允许svg版本使用标准URL。我想出的最好的是这：

The thing is I cannot figure out how to make the woff, otf and ttf versions use the Data URI while still allowing the svg version to use a standard URL. The best I have come up with is this:

@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular'), $weight: normal, $style: normal);

这将把svg分解成自己的@ font-face。是同一个帐户上的那个有效的CSS，我可以使用不同的权重和样式创建具有相同姓氏的多个@ font-face规则吗？如果是这样的话，它的工作方式和上面的CSS示例一样好吗？

Which will break the svg into its own @font-face. Is that valid CSS on the same account that I can create multiple @font-face rules with the same family name using different weights and styles? If that is the case, will it work just as good as the example CSS above (it appears to)? And, of course, is there a better way of accomplishing this in Compass/sass?

推荐答案

对于那些感兴趣的人，解决方法提到了在问题似乎工作得很好。将eot文件属性从数据URI @ font-face规则移动到使用标准 url（）的属性可能是个好主意。它出现有时数据：URL生成的太长，这打破了整个@ font-face规则。此外，请确保数据URI规则最后加载，因为Firefox 5及更高版本似乎只加载遇到的最后一个规则。因此，保持最后一个规则中的内联字体（woff，ttf，otf）和第一个中链接的字体（svg，eot），如下所示：

For those interested, the workaround mentioned in the question seems to work pretty well. It is probably a good idea to move the eot file attribute from data URI @font-face rule to the one using a standard url(). It appears sometimes the data: URL's generated are too long, which breaks the entire @font-face rule. Also, make sure the data URI rule is loaded last, since Firefox 5 and up seems to load only the last rule encountered. Hence, keep the inline fonts (woff, ttf, otf) in the last rule and the linked fonts (svg, eot) in the first, like so:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);

这篇关于新的Bulletproof @ font-face语法使用Compass中的数据URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！