Css 使用web（@font-face）字体

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

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

我的已知方式：
1） 去font.com购买各种palatino字体：普通、粗体、斜体、斜体粗体。4个不同的文件。
2） 然后我通过fontface样式加载字体

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

3） 我有4种不同的字体，在HTML标记中，我需要显式设置元素的字体，使其粗体、斜体或斜体粗体（这是我最不喜欢的）

问题：
1） 这是使用自定义web字体的工作流程吗？
2） 也许有一种方法可以将这种字体视为常用字体，即在父元素上只设置一种字体，如果我希望它们是斜体，则可以将其视为仅内部设置style=“font-style:italic；”。

---

3） 关于性能的问题，web字体渲染速度是否与普通字体的渲染速度不同

查看Fontsquirrel，它帮助我生成了多个浏览器兼容的字体和css:s。

如果只使用Palatino Linotype Normal，然后在css中将其更改为粗体，则不会得到与Palatino Linotype bold相同的结果。这里的问题是，浏览器渲染将用于实现这一点，这将非常糟糕。我的意思是，对我来说，也许对你来说，它看起来是一样的——但对设计师来说却不一样：）

此外，还有比普通、粗体和斜体更多的字体。有浅色、半浅色、黑色等。设计师往往会大量使用这些

因此，一般来说，对于第一个和第二个问题：对于不同的样式使用不同的字体面，而对于不同的样式不能使用不同的面，需要另一个字体族指示

---

至于第三个问题：性能是嵌入式字体的问题。但主要不是因为渲染，而是因为字体文件很难下载。因此，请确保缓存它们，并只使用那些需要的。例如，在前面的回答中，默认情况下添加了太多的文件，这些文件都是下载的，因此，请进行一些研究，了解不同的格式以及需要嵌入的内容。

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

@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

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

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

---

我有意使用“foobar”而不是“Palatino-Linotype”，因为后者在法律上不能作为可下载字体使用；至少这是假设，除非证明不是这样。（网上有许多网站非法分发或出售字体。）

您在web应用程序中使用Palatino Linotype字体，请使用google提供的web字体。

Web字体加载器是一个JavaScript库，它比GoogleWebFontsAPI提供的对字体加载的更多控制。Web字体加载器还允许您使用多个Web字体提供程序。它是由谷歌和Type kit共同开发的

更多信息请点击我的博客链接：

---

我的看法是没有渲染差异，必须使用回退字体（3可能足够好），而且很难找到高质量的字形（尝试调整web字体的大小，它们通常不太好）。我的方法和你的略有不同，我用任何格式的字体（大多数网站都有每月免费赠品，我有一个收藏）并使用联机转换器生成跨浏览器格式。使用

@font-face

时，性能会有所不同，因为如果用户的计算机上没有字体，它将从服务器下载并呈现给客户端。是，但是他们问了一个渲染时间差…@ A.M.K你能建议什么字体转换器？我用其他转换器组合来获得TTF或OTF文件，如果我没有，字形质量很好，但是如果你要用它们来做小文本，你可能想考虑其他转换器或原始的Web字体。“如果您只使用Palatino Linotype Normal，然后在CSS中将其更改为粗体，则不会得到与Palatino Linotype bold相同的结果。“是的，我在我的问题中写到了这一点。但是有没有一种方法可以将这些字体组合起来，使元素上的粗体Palatino Linotype设置和粗体样式成为可能？但是有没有一种方法可以将这些字体组合起来，使元素上的粗体Palatino Linotype设置和粗体样式成为可能简而言之，没有，但最好的方法可能是使用css类，如.bold、.italic等，并相应地应用它们。感谢您的回复。-）你知道吗，有没有一种方法可以将一些web字体的不同样式（常规、粗体、斜体）组合成一种，并且可以在元素上设置粗体Palatino-Linotype，只设置粗体样式？非常感谢，这似乎是我需要知道的。

 @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 */  }