选择性的样式后退字体没有JavaScript？ [英] Selectively Style Fallback Fonts Without JavaScript?

问题描述

我看到过使用JavaScript为后备字体设计样式的几种方法： Google& Typekit，例如，但我很好奇，如果没有JavaScript没有任何方式做它。

例如，我想使用Arial height：10px; 如果用户没有Arial，我想使用Times height：24px; 不是那样，我想使用蓝色的san-serif字体。

任何帮助将非常感谢！

这个javascript方法只是提供了一个@ font-face堆栈和每个浏览器的右边网址。你可以使用这个堆栈如下：

  font-family：your-google-font-name，arial，helvetica，freesans，无衬线字体; 
  

如果javascript在浏览器中被禁用，字体会回退到arial，如果arial不是安装，到hevetiva - 等等

不同的高度不应该是这个问题，因为通常你有后备字体，表现和看起来几乎相同的原来想要的字体。

使用javascript，没有问题设置它unstrstrusive。

使用Jasvascript jQuery here）：

 （function（$）{
 
 $（document）.ready （）{
 
 $（'html'）。addClass（'withJS'）; 
 
}）; 
 
} 
  

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

可根据实际的字体系列用途（body标签上的示例）设置不同的高度。

  var myFontFamily = $（'body'）。css（'fontFamily'）; 
 
 //记录您正在使用的名称：
 console.log（myFontFamily）; 
 
 if（myFontFamily =='your-family-name-here'）{
 $（'body'）。css（{fontSize：'20px'}）; 
} else {
 //做别的事... 
} 
  

I've seen a couple methods of styling fallback fonts with JavaScript: one by Google & Typekit, for example, but I'm curious if there's any way of doing it without JavaScript.

For example, I'd like to use Arial height:10px; and if the user doesn't have Arial, I want to use Times height:24px; and if not that, I want to use a blue san-serif font. Okay, rather an absurd example, but it shows the general effect I'm going for.

Any help would be greatly appreciated!

解决方案

the javascript method just provides a @font-face stack and the right urls for every browser.

you can use this stack as follows:

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

if the javascript is disabled in the browser, the fonts will fall back to arial, if arial is not installed, to hevetiva - and so on

different heights should not be the problem, because usually you have fallback fonts, that behave and look nearly the same as the original wanted font.

with javascript, there is no problem setting it unobstrusive.

make an html className with Jasvascript (i prefer jQuery here):

(function($){

  $(document).ready(function(){

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

  });

}(jQuery));

now you can set different styles with or without Javascript just in CSS.

to set different heights, depending on the actual font-family use (example on body tag)

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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！