网络上的字体 [重复]

Posted 2023-03-13

【中文标题】网络上的字体 [重复]

【英文标题】：Fonts on the Web [duplicate]

【发布时间】：2010-09-06 04:26:36

【问题描述】：

Web 开发人员可用的字体集合非常有限。我记得很久以前读过有关 TrueDoc 的文章，它是一种将字体与网站一起发送的方式——但它似乎已经萎靡不振。有没有人用过这个，或者类似的东西？是否有足够多的浏览器支持？我错过了一个好的解决方案吗？

请注意，负责任的 Web 开发人员不会使用仅在 Windows 上可用的字体（尤其是仅在 Vista 上可用的字体），也不会使用不受至少是大多数浏览器。

---

更新：正如一些人所指出的，为没有您使用的特定字体的人提供备用字体列表并没有错。事实上，我总是这样做，并不是要暗示这是错误的。

虽然我的问题措辞不当，但我的意思是设计师不应该对客户可用的东西做出太多假设。您应该计划所有用户如何看待您的网站，而不仅仅是使用您自己喜欢的设置的人。

【问题讨论】：

也许字体有限是件好事。我什至不想想象如果可以选择，人们会在网站上使用什么可怕的字体。

优秀的设计师可以使用boring fonts。 :) 我希望 android 将用Ascender Droid 取代微软对字体的垄断。否则我们就很卡了。 @font-face 对于手机来说是遥远的未来。

在How to use web-fonts legally? 上也有很好的信息（尤其是谷歌字体的答案）

你一定是在开玩笑。上述每个问题都包含对此问题的完整答案以及您需要了解的所有内容。

Pekka 为您提供了 三个 有用的链接，那就是您选择感谢他的方式？ o_0

【参考方案1】：

CSS2 提供：

@font-face 
    font-family: Garamond;
    src: url(garamond.eot), url(garamond.pfr);

【讨论】：

这很有趣，它适用于所有字体吗？

【参考方案2】：

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

嗯……你可以，只要你知道它将如何在非 Vista/非 Windows 操作系统上呈现。

否则：是的，CSS2 中的@font-face 是最好的标准替代方案，即使它没有得到广泛支持。

【参考方案3】：

Safari，在较小程度上，Firefox 3 支持 CSS 中的@font-face，它允许您使用自定义字体。不过，您需要拥有适当的许可证才能分发字体文件。这些文章更详细地解释了它：

http://www.css3.info/preview/web-fonts-with-font-face/ http://www.alistapart.com/articles/cssatten http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

【讨论】：

IE 和 Opera 也可以使用@font-face。有文章和字体转换器的链接。 randsco.com/index.php/2009/07/04/cross_browser_font_embeddingcode.google.com/p/ttf2eot

不赞成这一点，因为 stackexchange 不鼓励仅链接的答案。无论如何，感谢您指出 @font-face css 功能。

【参考方案4】：

请注意，负责任的 Web 开发人员不会使用仅 在 Windows 上可用（尤其是那些仅在 Vista），他们也没有使用至少不支持的技术 大多数浏览器。

只要您优雅地降级为广泛使用的字体，使用 Windows/Vista 特定字体就没有错或不正确。例如：

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

事实上，这就是重点！

【参考方案5】：

你当然可以使用SIFR。

这在不支持它并且可以访问的浏览器中优雅地降级。

它并不适合在大量文本上使用，但对于标题和突出显示文本来说它是完美的。

当然，这是针对目前浏览器和网络固有限制的一种解决方法，但大多数网络技术和技术何时不是这种情况。

【参考方案6】：

这是一个及时的线程；我们改用 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.. 但它远非普遍，因此对于全球网络受众来说严重依赖它有点不负责任。

【参考方案7】：

IE 支持@font-face（它最初是他们在 MS Word 中的专有技术）。 Here's a blog post from the IE team about it just about a month ago.

【参考方案8】：

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

我认为这有点不妥。如果你这样做也没关系；每个人都会得到一些他们可以轻松阅读的明智的东西，并且需要的人可以将字体更改为他们想要的任何字体，因为它只是文本，所有主要浏览器都允许您自定义您看到的字体，而不管网站设计师的偏好如何。

在您的 CSS 中建议某些用户没有的字体并没有什么问题；他们只是看到了与你不同的东西。异而不破。他们甚至不会想知道您为什么要使用默认字体，因为他们不知道其他人会看到什么不同。

这是字体集的重点：

Verdana, Arial, Helvetica, sans-serif

这是一种很好的做法，因为它承认人们会看到不同的东西。

这也是一个好习惯：

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

所以大多数人没有 Gill——谁在乎呢？无论如何，他们都会得到一个非常好的网站。

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

Gill Sans

不负责任的网页设计正在做一些事情，例如将文本设置为图像而不使用替代文本，不在字体集中使用有趣的字体。

【参考方案9】：

我想任何通过网页发送字体的方法都会带来某种安全风险。我听说过在客户端没有所需字体的情况下，可以将文本动态替换为显示的图像或某种闪光的方法。我现在能找到的唯一一个这样的地址是AListApart，但它可能已经是多余的了。 所述方法还需要 css、图像和 javascript 才能工作，并且跨浏览器实施可能会很痛苦。

【参考方案10】：

您可以使用 CSS3 中提供的新 @font-face declaration 来做到这一点。它对 CSS3 功能（即从 IE4 开始）也有很好的支持。

一般语法是：

@font-face 
    src: url('path to your font') format('woff|ttf|svg|eot|…');
    font-family: the name to use;
    font-weight: an optional weight;
    font-style: an optional style;

还有 a generator available 将字体转换为多种格式并创建适当的 CSS。

现在，我建议只提供 WOFF 文件；很方便，easy to create。

另外，请确保引用格式的名称（例如format('woff')）；否则它将无法在 Firefox 上运行。