@font-face 与 cufon答案

【问题标题】：@font-face vs. cufon@font-face 与 cufon
【发布时间】：2011-10-13 23:20:25
【问题描述】：

我正在开发一个网站，目前正在使用@font-face 技术 (this + this) 来加载字体。我注意到一些特殊字符没有正确加载 -> ŠĐŽČĆ šđžčć。也就是说，这些字符存在于字体本身中。所以，我做了一个测试... 我用@font-face 字体和cufon 字体加载了一个测试页面...... 结果如下 ->

当然，这里是代码 ->

<html>
    <head>
        <script type="text/javascript" src="cufon-yui.js"></script>
        <script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
        <style type="text/css">
            @font-face {
                font-family: 'ReprobateCROLASTRegular';
                src: url('reprob_cro_last_last-webfont.eot');
                src: local('ReprobateCROLASTRegular'),
                     url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
                     url('reprob_cro_last_last-webfont.woff') format('woff'),
                     url('reprob_cro_last_last-webfont.ttf') format('truetype'),
                     url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            h2{
                font-family:ReprobateCROLASTRegular;
            }
        </style>
    </head>
    <body>
        <h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
        <br/><br/>
        <h2>--> @FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
    </body>
</html>

到目前为止，我已经尝试从 utf8、widnwos1250 切换编码，但似乎没有任何东西可以与 @font-face 技术配合使用...

所以，我有两个问题...有人知道这里发生了什么吗？而且，如果我切换到使用 @font-face 的 cufon insted - 这会减慢页面加载速度吗？（考虑cufon使用JS加载字体）

感谢您的宝贵时间！

【问题讨论】：

我一定遗漏了一些东西，但它看起来对我来说是正确的......
@Andrej 你用的是什么浏览器？
@font-face 特殊字符在所有现代浏览器中都被弄乱了。在 chrome、firefox、IE > 7、opera、safari 中测试...在任何地方看起来都一样...
到目前为止，我认为这是@font-face 生成器的问题.. 它似乎没有呈现特殊字符...
找到了一个修复方法，但我无法将其发布为 anwser……它是字体生成器……我没有明确检查是否制作特殊字符……所以要解决这个问题，转到字体生成器，检查专家设置>>子集>>自定义子集>>选择您的语言...和..中提琴！

标签： html css fonts font-face cufon

【解决方案1】：

我自己最近在处理一个网络字体密集型网站时遇到了很多@font-face 问题，结果证明在线网络字体生成工具本身就是罪魁祸首。他们只是生成了错误的 .woff / .ttf /.svg /.otf 文件，导致 >很多问题很难确定问题的根源。

根据我的经验，唯一提供 100% 有效的在线网络字体生成服务 - 发布免费网络字体是 Font Squirrel。它还允许许多有用的东西，例如字体子集，这也可能是您的问题（即您没有指定在生成的网络字体中包含其他字符 - 如果我的话，塞尔维亚语/克罗地亚语是拉丁语扩展 B 的一部分我没有记错）。

【讨论】：

【解决方案2】：

您是否尝试过使用http://fontface.codeandmore.com/ 替代@font-face 生成器？

【讨论】：

【解决方案3】：

H2 字体定义错误：缺少单引号。

现在是：

font-family:ReprobateCROLASTRegular;

应该是：

font-family:'ReprobateCROLASTRegular';

【讨论】：

【解决方案4】：

您似乎已经解决了字体问题；回复：加载时间，我的经验是 font-face 和 cufon 都可能会慢到足以让默认文本短暂闪烁。当然，这取决于您的主机和用户的连接；但是这两种方法都需要相对繁重的下载（无论是JS还是字体）。

所以，在其他条件相同的情况下，恕我直言，您不妨使用 font-face；至少浏览器在缓存字体文件方面做得更好，因此在初始页面加载后，您可以获得更快的渲染。使用 cufon 它总是需要加载和执行 JS，所以你永远不会摆脱那部分加载时间。

【讨论】：

【解决方案5】：

你的实现很好。

但是当你使用字体时。您使用的字体。必须具有您要使用的所有字符。 .ttf 或任何在您使用时必须包含所有字符和特殊字符的文件。

当您使用 Cufon 时。 Cufon 生成器为您制作了许多额外的字体字母。在 Cufon 的字体生成器中。您可以为字体选择很多额外的。

你明白吗？？

【讨论】：