logo标签列表

处理网络(@font-face)字体

cssfontsfont-facewebfonts
3

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

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

我知道的方法：
1）前往 font.com 并购买所有种类的 Palatino-Linotype 字体：普通、粗体、斜体、斜体粗体。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字体渲染速度与普通字体的渲染速度是否有所不同？

我的看法是，没有渲染差异，你必须使用备用字体（3个可能足够了），高质量的字形很难找到（尝试调整网页字体大小，它们通常表现不佳）。我的方法与你的略有不同，我使用任何格式的字体（大多数网站都有每月免费赠品，我有一些收藏），并使用在线转换器生成跨浏览器格式。 - A.M.K
使用@font-face时，性能会有所差异，因为如果用户的计算机上没有该字体，则需要从服务器下载该字体以呈现给客户端。 - Jared
是的，但他们询问了渲染时间差异的问题... - A.M.K
我使用font2web.com与其他转换器结合使用，以获取ttf或otf文件，如果我没有的话，字形质量很好，但如果您将要将它们用于小文本，则可能需要考虑其他转换器或原始Web字体。 - A.M.K
你知道吗，有没有一种方法可以将某些网络字体的不同样式（常规、粗体、斜体）合并成一个，并使得在元素上设置粗体样式时能够获得粗体Palatino Linotype？ - WHITECOLOR
显示剩余2条评论
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并直接或间接地通过<i>，<em>和其他标记使用font-style: italic，以导致默认呈现为斜体。

我已经以明显的方式简化了代码；自然地，您通常应该使字体以不同的格式可用，这些格式被浏览器识别。

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

我故意使用“foobar”而不是“Palatino Linotype”，因为后者不可合法下载使用；至少在没有证据证明之前是这样的。(有许多网站非法分发或出售字体。)

非常感谢，看来那就是我需要知道的。 - WHITECOLOR
3
你知道吗，有没有一种方法可以将某些网络字体的不同样式（常规、粗体、斜体）合并成一个，并使得在元素上设置粗体样式时能够获得粗体Palatino Linotype？ - WHITECOLOR
2
如果您只使用Palatino Linotype Normal，然后在CSS中将其更改为粗体，您将无法获得与Palatino Linotype Bold相同的结果。这里的问题是浏览器渲染将用于实现它，并且会非常糟糕。我的意思是，对于我和你来说，它看起来可能是一样的 - 但设计师不会这么认为:)

此外，一个字体有很多变体，例如轻体、半轻体、黑体等等。设计师倾向于经常使用这些变体。

因此，总的来说，对于第一和第二个问题：对于不同的样式使用不同的字体，如果要为不同的样式使用不同的字体，则需要另一种字体系列指示。

至于第三个问题：嵌入字体的性能是一个问题。但主要不是因为渲染，而是因为字体文件下载量较大。因此，请确保缓存它们并仅使用所需的字体。例如，在先前的答案中http://www.fontsquirrel.com/默认情况下添加了太多的文件，所有这些文件都将被下载，因此请进行一些研究，了解不同的格式以及您需要嵌入哪些内容。

如果您只使用Palatino Linotype Normal字体，并在CSS中将其更改为粗体，那么您将无法获得与Palatino Linotype Bold相同的结果。是的，我在我的问题中写到了这一点。但是，有没有办法将这些字体组合起来，使得可以通过在元素上设置粗体样式来获得粗体的Palatino Linotype设置呢？ - WHITECOLOR
但是有没有可能将这些字体组合起来，使得在元素上只设置粗体样式就能获得粗体Palatino Linotype设置呢？简而言之，不行，但最好的方法可能是使用CSS类，如.bold、.italic等，并相应地应用它们。 - povilasp
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和Typekit共同开发。

更多信息请点击我的博客链接： 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 */  }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接