Geek asks and answers

Selectively style fallback fonts without JavaScript?

I saw a couple of methods for styling fallback fonts with JavaScript: one from Google and Typekit, for example , but I'm curious if there is a way to do this without JavaScript.

For example, I would like to use Arial height:10px;, and if the user does not have Arial, I want to use Times height:24px;, and if it is not, I want to use the blue font san-serif. Okay, rather an absurd example, but it shows the general effect that I am going to do.

Any help would be greatly appreciated!

+3
source share
2 answers

CSS . JavaScript, . ( JavaScript IE, , - - .)

, , , ; , ( , ).

+1

javascript- @font-face URL- .

:

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

javascript , arial, arial , hevetiva -

, , , .

javascript, , .

html className Jasvascript ( jQuery ):

(function($){

  $(document).ready(function(){

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

  });

}(jQuery));

Javascript CSS.

, ( 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...
}
+1

More articles:


All Articles