3

我已经看到了几种使用 JavaScript 设置后备字体样式的方法：例如 Google 和 Typekit 的一种，但我很好奇是否有任何方法可以在没有 JavaScript 的情况下做到这一点。

例如，我想使用 Arial height:10px;，如果用户没有 Arial，我想使用 Times height:24px;，如果没有，我想使用蓝色 san-serif 字体。好吧，这是一个荒谬的例子，但它显示了我想要的一般效果。

任何帮助将不胜感激！

4

2 回答 2

1

在 CSS 中没有办法做到这一点。如果您找到了使用 JavaScript 的方法，请分享。（有一种方法可以在 IE 上获取 JavaScript 中所有已安装字体的列表，但我不知道任何跨浏览器的方式。）

请注意，您引用的页面没有样式后备字体；相反，它动态加载字体（并且在您可以这样做的范围内，后备字体失去意义）。

于 2012-04-19T05:15:36.553 回答
1

javascript 方法只是为每个浏览器提供了一个@font-face 堆栈和正确的 url。

您可以按如下方式使用此堆栈：

font-family:your-google-font-name, arial, helvetica, freesans, sans-serif;

如果在浏览器中禁用了 javascript，字体将退回到 arial，如果未安装 arial，则退回到 hevetiva - 依此类推

不同的高度应该不是问题，因为通常你有备用字体，其行为和看起来与原始想要的字体几乎相同。

使用 javascript，将其设置为不显眼是没有问题的。

用 Jasvascript 制作一个 html 类名（我更喜欢这里的 jQuery）：

(function($){

  $(document).ready(function(){

    $('html').addClass('withJS');

  });

}(jQuery));

现在您可以在 CSS 中使用或不使用 Javascript 设置不同的样式。

设置不同的高度，取决于实际使用的字体系列（body 标签上的示例）

var myFontFamily = $('body').css('fontFamily');

// Log to see whats the name you are working with:
console.log(myFontFamily);

if(myFontFamily == 'your-family-name-here'){
  $('body').css({fontSize: '20px' });
} else {
  // do something else...
}
于 2012-04-19T09:44:58.497 回答