Question

我有一个网页，它使用非网页安全字体（@ 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 */
}

Answer 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????
}

或者你想总是说你的标题字体..在这种情况下，我甚至不会经历处理自定义字体的麻烦。只需创建您的图像并在100％的时间内使用它。为一个标题图像加载整个字体库的开销很愚蠢。

Answer 2

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

http://cufon.shoqolate.com/generate/

Answer 3

一种选择是使用一个测量字符串宽度的JS库来检测字体是否可用。遗憾的是，JS无法直接执行您想要的功能。

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

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

3 个答案: