使用 web (@font-face) 字体答案

【问题标题】：Working with web (@font-face) fonts使用 web (@font-face) 字体
【发布时间】：2012-11-18 18:38:54
【问题描述】：

我有一个基本问题，可能更多地涉及设计领域，但它仍然是一个网络编程。

假设我需要在我的 Web 应用程序中使用 Palatino-Linotype 字体。如何更好地将其嵌入到我的网页应用程序中？

我知道的方式：
1) 访问 font.com 并购买各种 palatino-linotype：normal、bold、italic、italic-bold。 4 个不同的文件。
2）然后我通过字体样式加载字体

@font-face {
    font-family: "Palatino-Linotype-normal";
    src: "..."
}
@font-face {
    font-family: "Palatino-Linotype-italic";
    src: "..."
}

3) A 我有 4 种不同的字体，在 HTML 标记中，我需要明确设置元素的字体以使其变为粗体、斜体或斜体粗体（这是我最不喜欢的）。

问题：
1) 是使用自定义网络字体的工作流程吗？
2）也许有一种方法可以将此字体视为普通字体，即在父元素上仅设置一种字体，并且仅用于内部设置 style="font-style: italic;"如果我希望它们是斜体的。
3）关于性能的问题，网络字体渲染速度与普通字体的渲染速度有什么不同？

【问题讨论】：

我认为没有渲染差异，您必须使用后备字体（3 可能就足够了）并且很难找到高质量的字形（尝试调整网络字体的大小，它们通常效果不佳）。我的方法与你的略有不同，我采用任何格式的字体（大多数网站都有每月免费赠品，我有一个收藏）并使用在线转换器生成跨浏览器格式。
使用@font-face 时性能会有所不同，因为如果用户的计算机上没有字体，则会从服务器下载该字体以呈现给客户端。
是的，但是他们询问了渲染时间差...
@A.M.K 你能建议什么字体转换器？
如果我没有，我使用font2web.com 结合其他转换器来获取 ttf 或 otf 文件，字形质量很好，但如果您打算将它们用于您可能想要的小文本考虑其他转换器或原始网络字体。

标签： css fonts font-face webfonts

【解决方案1】：

查看 Fontsquirrel http://www.fontsquirrel.com/ 它帮助我生成兼容多种浏览器的字体和 css:s。

【讨论】：

你知道吗，有没有一种方法可以将一些网络字体的不同样式（常规、粗体、斜体）组合成一个字体，并可以将粗体 Palatino Linotype 设置为粗体样式元素？

【解决方案2】：

如果您只使用 Palatino Linotype Normal，然后在 CSS 中将其更改为粗体，您将不会获得与 Palatino Linotype Bold 相同的结果。这里的事情是浏览器渲染将用于实现这一点，它会很糟糕。我的意思是，对我来说，可能对你来说，它看起来是一样的——但对设计师来说却不是：)

此外，一种字体比普通字体、粗体和斜体要多得多。有浅色、半浅色、黑色等。设计师往往会经常使用这些。

所以总的来说，对于第一个和第二个问题：不同的风格使用不同的字体，不同的风格没有办法使用不同的字体，需要另一个字体族指示。

至于第三个：性能是嵌入字体的问题。但主要不是因为渲染，而是因为字体文件下载量很大。所以一定要缓存它们并只使用那些需要的。例如，上一个答案中的http://www.fontsquirrel.com/ 实际上默认添加了太多已下载的文件，因此请进行一些研究以了解不同的格式以及您需要嵌入的内容。

【讨论】：

“如果您只使用 Palatino Linotype Normal，然后在 CSS 中将其更改为粗体，您将无法获得与 Palatino Linotype Bold 相同的结果。”是的，我在我的问题中写过它。但是有没有一种方法可以结合这些字体，并且可以在元素上设置粗体的 Palatino Linotype 字体？
但是有没有一种方法可以组合这些字体，并且可以在元素上设置粗体的 Palatino Linotype 字体？ – 简而言之，不，但可能最好的方法是使用 css 类，如 .bold、.italic 等，并相应地应用它们。
感谢您的回复。 -)

【解决方案3】：

浏览器通常支持的逻辑方式是在单独的规则中声明每种字体，如

@font-face {
    font-family: foobar;
    src: url("foobar-regular.woff");
}
@font-face {
    font-family: foobar;
    font-style: italic;
    src: url("foobar-italic.woff");
}

然后只需声明font-family: foobar 并通过<i>、<em> 和其他会导致默认呈现斜体的标记直接或间接使用font-style: italic。

我以一种明显的方式简化了代码；当然，您通常应该使字体以浏览器识别的不同格式提供。

像 FontSquirrel 这样的服务会生成不同的代码，但修复它们生成的代码或从头开始编写代码相当简单。

我故意使用“foobar”而不是“Palatino Linotype”，因为后者在法律上不能用作可下载字体；至少在证明并非如此之前，这是假定的。（网络上有很多非法分发或销售字体的网站。）

【讨论】：

非常感谢，看来这正是我需要知道的。

【解决方案4】：

您在 Web 应用程序中使用 Palatino-Linotype 字体，使用来自 google 的 Web 字体。 https://developers.google.com/webfonts/docs/webfont_loader

Web Font Loader 是一个 JavaScript 库，与 Google Web Fonts API 相比，它可以让您更好地控制字体加载。 Web Font Loader 还允许您使用多个 Web 字体提供程序。它是由 Google 和 Type kit 共同开发的。

更多信息请点击此链接到我的博客： http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html

 @font-face {   font-family: 'Awesome Font';   src:
       url('awesome-font.eot');  /* IE9 Compat Modes */   src:
       url('awesome-font.eot?#iefix') format('embedded-opentype'), /*
       IE6-IE8 */
                url('awesome-font.woff') format('woff'), /* Modern Browsers */
                url('awesome-font.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */  }

【讨论】：