Question

我见过几种使用JavaScript设计后备字体的方法：one by Google & Typekit, for example，但我很好奇是否有任何方法可以在没有JavaScript的情况下进行。

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

非常感谢任何帮助！

Answer 1

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

请注意，您引用的页面不会设置后备字体样式;相反，它会动态加载一个字体（在你可以做到的范围内，后备字体会失去意义）。

Answer 2

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

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

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

如果在浏览器中禁用了javascript，那么如果没有安装arial，字体将回退到arial，等等 -

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

使用javascript，将其设置为不引人注意是没有问题的。

使用Jasvascript创建一个html className（我更喜欢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...
}

没有JavaScript的有选择性风格的后备字体？

2 个答案: