Использование собственного шрифта с CSS3 / HTML5?

Question

У меня есть этот код в начале моей таблицы стилей CSS (конечно, она связана с моим index.html):

@font-face {
    font-family: "Calibri";
    src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}

И я использую:

#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}

Но это все равно не работает. Что не так с моим кодом?

Answer 1

У вас есть local("Calibri"), повторенный дважды в вашем src свойстве.

Также имейте в виду, что IE не поддерживает local(), поэтому, если вы просматриваете свой сайт в IE, он не будет загружать шрифт. Кроме того, насколько мне известно, IE поддерживает только формат EOT.

Для шрифта OTF используйте format("opentype") (у вас есть "TrueType").

Еще одна вещь: если это шрифт Microsoft Calibri, имейте в виду, что лицензия может не разрешать этот тип использования. Я не знаком с лицензией, поэтому не могу точно сказать, так ли это.

Answer 2

В целом, принятый код для использования на данный момент таков:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

в соответствии с предложением Пола Айриша: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Смайлик для local - это потому, что вы не можете быть уверены, что локальный файл пользователя - это тот, который вы намереваетесь (подробности читайте на странице, это интересно читать)

Answer 3

РАЗРЕШЕНО: поддерживает файлы TTF (не OTF).

Answer 4

Не эксперт в этом вопросе, но вы можете попробовать этот инструмент здесь .

Это может по крайней мере помочь сгенерировать пример того, что вы должны иметь.