鞏固字體文件，同時支持IE

Question

我有好幾個字體，現在，我需要用我的網站：我css貌似

fonts/ 
├── Knockout-30.otf 
├── Verlag-Black.otf 
├── Verlag-Bold.otf 
├── Verlag-Book.otf 
├── Verlag-Light.otf 
├── VerlagCond-Black.otf 
└── VerlagCond-Bold.otf 

現在：

@font-face { 
    font-family: 'Knockout'; 
    src: url('fonts/Knockout-30.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Verlag'; 
    src: url('fonts/Verlag-Book.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Verlag'; 
    src: url('fonts/Verlag-Bold.otf') format('opentype'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Verlag'; 
    src: url('fonts/Verlag-Light.otf') format('opentype'); 
    font-weight: lighter; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'VerlagBlack'; 
    src: url('fonts/Verlag-Black.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'VerlagCond'; 
    src: url('fonts/VerlagCond-Black.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'VerlagCond'; 
    src: url('fonts/VerlagCond-Bold.otf') format('opentype'); 
    font-weight: bold; 
    font-style: normal; 
} 

眼下這些字體顯然不支持IE，所以我正在使用https://onlinefontconverter.com/來生成IE友好的字體文件類型。對我來說，我必須爲字體文件進行7次調用似乎有點嚴重。在整合這些文件方面是否有一個很好的標準，這樣我只需要撥打一個電話？或者至少鞏固相似的字體家族類型？我被推薦base64編碼的一切，包括在css，但我知道base64增加了我收集的文件大小，所以我不確定這種交易是否值得。任何意見非常感謝，謝謝。

Answer 1

有很多方法可以做到這一點，但下面是調用@font-face

@font-face { 
    font-family: "Roboto"; 
    font-style: italic; 
    font-weight: 100; 
    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), 
     url(../fonts/Roboto/Roboto-ThinItalic.woff2) format("woff2"), 
     url(../fonts/Roboto/Roboto-ThinItalic.woff) format("woff"), 
     url(../fonts/Roboto/Roboto-ThinItalic.ttf) format("truetype"), 
     url(../fonts/Roboto/Roboto-ThinItalic.eot), 
     url(../fonts/Roboto/Roboto-ThinItalic.eot?#iefix) format("embedded-opentype"), 
     url(../fonts/Roboto/Roboto-ThinItalic.svg#Roboto) format("svg"); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

@font-face { 
    font-family: "Roboto"; 
    font-style: normal; 
    font-weight: 100; 
    src: local("Roboto Thin"), local("Roboto-Thin"), 
     url(../fonts/Roboto/Roboto-Thin.woff2) format("woff2"), 
     url(../fonts/Roboto/Roboto-Thin.woff) format("woff"), 
     url(../fonts/Roboto/Roboto-Thin.ttf) format("truetype"), 
     url(../fonts/Roboto/Roboto-Thin.eot), 
     url(../fonts/Roboto/Roboto-Thin.eot?#iefix) format("embedded-opentype"), 
     url(../fonts/Roboto/Roboto-Thin.svg#Roboto) format("svg"); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 
... 

---

FONT-FAMILY的標準方法 - 定義一個全局命名
字體風格 - 定義字體文件的字體樣式
字體重量 - 定義字體文件的字體粗細
SRC - 定義路徑
Unicode的範圍 - 好，這是可選的：如果你不知道你忽略了這條線知道

所以基本上你必須對所有字體類型&權重重複執行此操作，除非所有字體類型包含在單個字體文件中。所以通過分別定義這些，瀏覽器將很容易拾取所需的字體文件。因此，您只需要爲子元素定義字體樣式的權重，瀏覽器將決定選擇哪個文件。所以除了定義它們之外沒有別的選擇。

---

如果你不想調用多個文件，

你可以簡單地這樣調用和字體樣式的字體&字體重量會被瀏覽器渲染，而不是文件（注：這可能會導致一些抗鋸齒問題）

@font-face { 
    font-family: "Roboto"; 
    font-style: normal; 
    font-weight: normal; 
    src: local("Roboto"), 
     url(../fonts/Roboto/Roboto.woff2) format("woff2"), 
     url(../fonts/Roboto/Roboto.woff) format("woff"), 
     url(../fonts/Roboto/Roboto.ttf) format("truetype"), 
     url(../fonts/Roboto/Roboto.eot), 
     url(../fonts/Roboto/Roboto.eot?#iefix) format("embedded-opentype"), 
     url(../fonts/Roboto/Roboto.svg#Roboto) format("svg"); 
} 

爲了得到一個更好的主意閱讀：https://www.w3.org/TR/2009/WD-css3-fonts-20090618/