网络上的字体 [重复]

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 上运行。