网页上缺少字体

Question

我正在尝试在所有客户端本身不存在的网页上使用字体。有没有办法检测丢失的字体并通知用户在哪里下载？

Answer 1

使用@font-face的方式更加优雅，但如果您想要通知用户，可以使用此解决方案（尽管我强烈建议您使用@font-face）：

您可以使用FontChecker之类的脚本来检查字体是否可用。它依赖于MooTools并被这样调用：

window.addEvent('domready',function() {
  var fc = new FontChecker();
  if (!fc.check('Some Font')) {
    alert('Please install "Some Font"!');
  }
});

如果某些字体不可用，则会显示一条消息。

如果你不使用MooTools，那么其他库或vanilla JS（=没有库的普通JS）也有类似的脚本。或者只是重写它，it's quite short。

其他一些脚本（我不知道它们，我只使用FontChecker）：

• jQuery：http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
• 香草：http://www.samclarke.com/2013/06/javascript-is-font-available/
• 另一个香草：http://www.lalit.org/lab/javascript-css-font-detect/

Answer 2

如果该字体已获得在公共网页上使用的许可，则可以在此处使用其他答案中引用的@font-face。

但是，大多数商业字体都没有获得网络许可，因为任何人都可以自己检查CSS并自行下载字体。

您最好的选择是从谷歌网络字体等服务中选择不同的字体并使用@ font-face。

http://www.google.com/fonts

Answer 3

另一种方法是cufon。但它不是纯CSS，它使用JS来创建基于画布的字体。