logo标签列表

Web上的字体

htmlcssfonts
26

对于网页开发人员可用的字体集合非常有限。我记得很久以前曾经听说过TrueDoc，它是一种将字体与网站一起传送的方法，但似乎已经被淘汰了。有人使用过这种技术或类似的技术吗？它被足够多的浏览器支持吗？还是我漏掉了更好的解决方案？

请注意，负责任的网页开发人员不会使用仅在Windows上（尤其是仅在Vista上）可用的字体，也不会使用不能被大多数浏览器支持的技术。

更新：正如一些人指出的那样，为那些没有你使用的特定字体的人提供备选字体列表并没有错。实际上，我总是这样做的，我并不是想表达这是错误的。

虽然我的问题表述得不太好，但我的意思是设计师不应该对客户拥有的资源过多地作出假设。你应该计划如何让所有用户都能看到你的网站，而不仅仅是那些使用你自己喜欢的设置的人。

1
也许字体受限是一件好事。如果给人们选择，我甚至不想想象他们会为网站使用多么可怕的字体。 - Kevin
优秀的设计师可以使用无聊的字体。 :) 我希望Android能够用Ascender Droid取代微软字体垄断。否则我们就陷入了困境。@font-face对于移动设备来说还是遥远的未来。 - hendry
还有一些关于“如何合法使用 Web 字体”的好信息（特别是 Google Fonts 的回答）链接。 - Pekka
你一定是在开玩笑。以上每个问题都包含了完整的答案，其中包括你需要知道的所有内容。 - Pekka
4
Pekka为你找到了三个有用的链接，可你却用这种方式来感谢他？o_0 - sarnold
请参阅 https://dev59.com/YHA85IYBdhLWcg3wCfBZ。 - Ry-
10个回答
20
1
可以在IE和Opera中使用@font-face。以下是文章链接和字体转换器。http://randsco.com/index.php/2009/07/04/cross_browser_font_embeddinghttp://code.google.com/p/ttf2eot/ - Michas
3
不点赞这篇回答，因为StackExchange不鼓励只包含链接的回答。不过还是感谢你指出@font-face CSS特性。 - q9f
11

这是一个及时的帖子; 我们改用Arial字体，因为与所有其他回退字体相比，Calibri字体实在太小了！用(gag) Arial字体取而代之让我感到非常痛苦，因为它是Helvetica的一份垃圾复制品：

http://www.ms-studio.com/articles.html

这里详细描述了尺寸问题（如果您将"c"字体作为标准，那么字体会太大；如果选择普通字体，则字体会太小）:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

我会非常想念Calibri的美丽手动调整的RGB平滑处理，但是在不要求安装Calibri的情况下，对于大多数用户来说，提供良好的体验是不可能的。 它是相当常见的，因为它随Office 2007（Win / Mac）和Vista一起提供..但它远非普遍，因此对于全球网络受众严重依赖它有点不负责任。

3

当然，您可以使用SIFR。

在不支持它的浏览器中，它会逐渐降级，并且易于访问。

它并不适合用于大量文本，但对于标题和强调文本而言，它是完美的。

当然，这是一种绕过浏览器和当前Web固有限制的解决方法，但这对于大多数Web技术和技巧来说并非没有先例。

3
你可以使用CSS3中提供的新的@font-face声明来实现这一点。它对于CSS3功能有很好的支持（即自IE4以来）。
一般的语法如下：
@font-face {
    src: url('<em>path to your font</em>') format('<em>woff|ttf|svg|eot|…</em>');
    font-family: <em>the name to use</em>;
    font-weight: <em>an optional weight</em>;
    font-style: <em>an optional style</em>;
}

现在还有一个可用的生成器可以将字体转换为多个格式并创建适当的CSS，点击此处。

现在，我建议只提供WOFF文件；它很方便，易于创建。

此外，请确保引用格式名称（例如format('woff')）；否则Firefox将无法使用。

2

请注意，负责任的网络开发人员不会使用仅在Windows上可用（特别是仅在Vista上可用）的字体，也不会使用不被大多数浏览器支持的技术。

如果你能优雅地降级到广泛可用的字体，那么使用Windows/Vista特定的字体并没有什么问题或错误。例如：

font-family: Calibri, Tahoma, Helvetica, Sans-Serif;

事实上，这就是整个重点！
1

CSS2 提供了以下功能：

@font-face {
    font-family: Garamond;
    src: url(garamond.eot), url(garamond.pfr);
}
那很有趣，它能适用于所有字体吗？ - Drake
1
1
请注意，负责任的网页开发人员不会使用仅在Windows上（尤其是仅在Vista上）才可用的字体，也不会使用不受大多数浏览器支持的技术。
我认为这种方法并不重要。无论如何，每个人都会看到一些易于阅读的有意义的东西，并且需要更改字体的人可以随意更改，因为这只是文本，所有主要浏览器都可以让您自定义所见字体，而不考虑网站设计师的偏好。
在CSS中建议某些用户没有的字体并不会出现问题；他们只会看到与您不同的东西。不同并不代表错误。他们甚至不会想知道为什么您正在使用默认字体，因为他们不知道其他人是否会看到不同的内容。
这就是字体集的全部意义：
Verdana, Arial, Helvetica, sans-serif

这是好的实践，因为它承认人们会看到不同的东西。

这也是良好的实践：

Gill Sans, Verdana, Arial, Helvetica, sans-serif

大多数人没有吉尔 - 谁在乎？ 他们无论如何都能得到一个完美的网站。

这也可以，但有点奇怪和懒惰：

Gill Sans

不负责任的网页设计就是像把文本设置为图像而没有使用替代文本，或者没有在字体集中使用有趣的字体等。
0
请注意，负责任的网络开发人员不会使用仅在Windows上（尤其是仅在Vista上）可用的字体，也不会使用不受大多数浏览器支持的技术。
嗯...只要您知道它在非Vista /非Windows操作系统上如何呈现，就可以这样做。
否则：是的，在CSS2中使用@font-face是最好的标准替代方案，即使它没有得到广泛支持。
0

我想象中，任何一种在网页中发送字体的方法都会带来某种安全风险。我听说过一些方法，在客户端没有所需字体的情况下，可以动态地用图像或某种闪存替换文本。现在我能找到的唯一一个类似的方法是在AListApart，但它可能已经过时了。 这种方法还需要CSS、图像和JavaScript才能工作，并且在各种浏览器上实现起来可能很痛苦。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接