fonts fallbacks: how to specify “font-specific” rules?

问题

sometimes web-fonts don't load (for instance if hosted on google fonts) and fallbacks may need special treatment, because they can be consistently different from other specified fonts

for instance:

font-family:'webfontname', 'winfont', 'linuxfont', sans-serif;

now the webfont should have

letter-spacing:2px;

but winfont should have

letter-spacing:-4px;

how can I manage this?

thank you

回答1:

You're using Google Web Fonts, so I suggest using the WebFont Loader, which will allow you to, for example, apply different CSS depending on whether the font is loading or loaded.

Here's a minimal example based on the code from my second link:

http://jsbin.com/izadif/ (spam refresh to see it)

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-loading h1 {
        font-family: serif;
        font-size: 16px;
        color: red;
        letter-spacing: 20px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
  </body>
</html>

来源：https://stackoverflow.com/questions/9089650/fonts-fallbacks-how-to-specify-font-specific-rules

标签

html

css

cross-platform