Javascript 如果字体不可用，请用图像替换文本

我有一个网页使用非网络安全字体（@font-face…）作为标题

如果浏览者的浏览器不支持此功能，这将看起来非常糟糕，那么是否有方法检测此功能并在不支持此功能的情况下用图像替换文本

@font-face {
    font-family: 'awesomefont';
    src: url('fonts/awesomefont-webfont.eot');
    src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/awesomefont-webfont.woff') format('woff'),
         url('fonts/awesomefont-webfont.ttf') format('truetype'),
         url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'awesomefont'; /* Substitute with image if font not supported */
}

p {
    font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}

---

我不确定是否有办法满足你的要求。但我通常使用cufon在我的网站上使用自定义字体。它使用画布从文本创建图像。如果浏览器不支持javascript，它只显示原始文本

---

一个选项是使用一个JS库来测量字符串的宽度，以检测字体是否可用。不幸的是，JS中没有可以直接做您想要做的事情的功能

以下是一些使用字符串测量技术的实现：

---

或者，您是否希望始终为页眉指定字体。。在这种情况下，我甚至不会经历处理自定义字体的麻烦。只需创建您的图像，并在100%的时间内使用它。为一个标题图像加载整个字体库的开销是愚蠢的

我在整个网站上使用字体，所以加载开销不是问题。对于网站的主体文本，我已经定义了一种网络安全字体，但是如果可能的话，页面标题应该用图片而不是替代字体来替换。好的，我必须问一下。你的头有多大？如果你不介意我问你用什么字体？你有没有比较过把标题变成静态图像的重量？可能没有那么多。也要考虑，如果你关心大小；这些解决方案中的任何一个最终都会增加页面的大小，并增加客户端的处理能力。我将再次强调，如果你执意不使用websafe字体作为备份，请坚持使用静态图像作为你的#1选项。

@font-face {
  font-family: 'Nosifer Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

p {
  font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}