具有CSS的Cusom字體-僅適用於Internet Explorer

Question

我正在為我的一個朋友建立一個網站。 他對頁面上的字體非常具體。 我已經從互聯網上下載了自定義字體，但是很奇怪。 它僅在Internet Explorer（有點驚奇）中工作。

這是我的代碼：

@font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
} 
@font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}

這就是我稱呼字體家族的方式：

  p 
    {
        font-family: eurostile;
    }

等...我在做什么錯？

Answer 1

您需要將其格式化為跨平台樣式。 看這里 。

問題在於不同的瀏覽器支持不同的字體樣式。

就像是：

@font-face {
    font-family: 'fontMN';
    src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/font_font-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}

會工作。

如上所示，您將需要獲取對要支持的瀏覽器有效的格式。

Answer 2

瀏覽器使用不同的格式。 IE使用eot格式，大多數使用woff，但有些使用svg或ttf / otf。

看一下這個：

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

您可以通過將ttf / otf上傳到fontsquirrel並使用其轉換器來創建所有這些字體：

http://www.fontsquirrel.com/tools/webfont-generator

Answer 3

http://jasonlau.biz/home/css/embedding-custom-fonts-with-css

如果您需要在網站中嵌入自定義字體，則這部分CSS將完成任務。 請按照以下步驟將自定義字體嵌入您的網站。

Answer 4

使用此工具可生成font-face規則-http: //www.fontsquirrel.com/tools/webfont-generator 。