@font-face - how to make it work on all browsers

问题:

The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

This text is from here. So in order to have working @font-face for IE9 I should just specify EOT font file:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Particularly I am using Myriad Pro, and I have OTF fonts. How I can convert them into EOT type?

And regarding to IE7 and IE8 what trick/hack should be used to obtain the desired result?

回答1:

Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.

My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and the code for you.

Be careful not to share fonts you don't have the rights to do so with.

回答2:

I think this is almost fully cross-browser

@font-face {
    font-family: 'Name';
    src: url('location.eot');
    src: url('location.eot#iefix') format('embedded-opentype'),
         url('location.woff') format('woff'),
         url('location.ttf') format('truetype'),
         url('location.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Location is the path on your server, and Name is the font's name

回答3:

Jacktheripper already posted a good font-face,

i recommend you the following good articles on that topic:

Article from Paul Irish

Article from fontspring

Personally, i use Google Web Fonts and am very satisfied with it. You have no troubles converting the fonts, embedding the right code, and worrying about copyright issues with a good variety of available fonts.

回答4:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

The local() directive allows you to reference, load, and use locally installed fonts.

The url() directive allows you to load external fonts, and are allowed to contain an optional format() hint