Possible Duplicate:
How we can use @font-face in LESS type of CSS

With the modern browsers and their newest versions in the back of our mind (for a website intended for future use) would this font definition with ttf, svg and eot be the best solution for FF, IE, Chrome and Safari?

Is the below the best minimal version that guarantees compatibility? in other words can svg and eot be removed nowadays or does IE still need eot being unable to read ttf?

        @font-face {
            font-family: 'Somefont Regular';
            src: url('somefont.eot');
            src: local('Somefont Regular'), 
                 local('Somefont'), 
                 url('somefont.ttf') format('truetype'),
                 url('somefont.svg#font') format('svg'); 
有帮助吗?

解决方案

The magical Paul Irish wrote an article on @font-face cross-browser/cross-platform support sometime in 2010. It's worth checking out.

Also, here's some code I tend to use often:

@font-face {
    font-family: 'Museo';
    src: url('museo_slab_500-webfont.eot');
    src: url('museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('museo_slab_500-webfont.woff') format('woff'),
         url('museo_slab_500-webfont.ttf') format('truetype'),
         url('museo_slab_500-webfont.svg#Museo') format('svg');
    font-weight: normal;
    font-style: normal;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top