Объединить шрифт-файлы при поддержке IE

Question

У меня есть довольно много шрифтов прямо сейчас, что мне нужно использовать для моего сайта:

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

Сейчас мой css выглядит следующим образом:

@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-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/