3

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

假设我需要在我的 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) AI 有 4 种不同的字体，在 HTML 标记中，我需要明确设置元素的字体，使其变为粗体、斜体或斜体粗体（这是我最不喜欢的）。

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

4

4 回答 4

4

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

@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和使用。font-style: italic<i><em>

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

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

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

于 2012-11-30T17:04:25.630 回答
3

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

于 2012-11-30T14:22:32.733 回答
2

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

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

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

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

于 2012-11-30T14:28:18.650 回答
0

您在 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 */  }
于 2013-02-06T11:34:06.770 回答