org.sonar.css.checks.l10n.common.font-face-browser-compatibility.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation
There is a newer version: 4.13

    While using the @font-face rule, lots of browser compatibility issues arise. This rules performs some
    checks regarding browser compatibility. The browser support level can be set to either:


    Deepest Possible Browser Support (deepest)
    Slightly Deeper Browser Support (deep)
    Practical Level of Browser Support (basic)


Deepest Browser Support (deepest)
The following definition supports most of the browsers still in use:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.eot');                                     /* IE9 Compatibility Modes */
  src: url('myfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
       url('myfont.woff2') format('woff2'),                   /* Super Modern Browsers */
       url('myfont.woff') format('woff'),                     /* Pretty Modern Browsers */
       url('myfont.ttf') format('truetype'),                  /* Safari, Android, iOS */
       url('myfont.svg#svgFontName') format('svg');           /* Legacy iOS */
}


The rule checks the following:

    At least two src properties.
    The second to last src property only defines an .eot file with no format.
    The last src property defines the .eot file first with the IE6-IE8
        ?#iefix hack. All the other formats are then defined in the following order: woff2,
        woff2, ttf, svg.
    


Slightly Deeper Browser Support (deep)
The following definition is compatible with:

    
        Chrome
        Safari
        Firefox
        Opera
        IE
        Android
        iOS
    
    
        3.5+
        3+
        3.5+
        10.1+
        9+
        2.2+
        4.3+
    


@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}


The rule checks the last src property as follows:

    Defines at least woff2, woff and truetype formats in this order.
    Additional formats can be defined but only after the truetype format. An exception though, an
        .eot file can be defined before the woff2 format. Basically, if
        a Deepest Browser Support syntax is found, it should not raise any issue.
    


Practical Level of Browser Support (basic)
The following definition is compatible with:

    
        Chrome
        Safari
        Firefox
        Opera
        IE
        Android
        iOS
    
    
        5+
        5.1+
        3.6+
        11.50+
        9+
        4.4+
        5.1+
    


@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}


The rule checks the last src property as follows:

    Defines at least woff2 and woff formats in this order.
    Additional formats can be defined but only after the woff format. An exception though, an
        .eot file can be defined before the woff2 format.Basically, if
        a Deeper or Deepest Browser Support syntax is found, it should not raise any issue.
    


See

    CSS-TRICKS, Using @font-face
    FONTSPRING, Further
        Hardening Of The Bulletproof Syntax