Многие популярные шрифты, по-видимому, доступны для использования в Интернете исключительно из http://webfonts.fonts.com/
Однако это работает очень странно. Они не дают вам прямых URL-адресов шрифтов, вместо этого они дают вам файл CSS, который ссылается на файлы шрифтов. Я думаю, что URL-адреса шрифтов в CSS, вероятно, временны и со временем меняются, чтобы предотвратить несанкционированное использование. Поэтому вы должны использовать свой CSS, вы не можете напрямую включать URL-адрес файла шрифтов (насколько я знаю).
CSS в свою очередь не то, что я думаю, это должно быть. Вместо (упрощенного):
@font-face {
font-family: "Foo";
font-weight: bold;
src: url("foo-bold-variant.ttf");
}
@font-face {
font-family: "Foo";
font-weight: normal;
src: url("foo-normal-variant.ttf");
}
Это:
@font-face {
font-family: "Foo Bold";
src: url("foo-bold-variant.ttf");
}
@font-face {
font-family: "Foo Normal";
src: url("foo-normal-variant.ttf");
}
В результате вы не можете этого сделать:
body {
font-family: "Foo", sans-serif;
}
Вместо этого в любом месте, где вы используете font-weight: bold
, вы должны изменить его на font-family: "Foo Bold"
, плюс я полагаю, вы должны добавить правила CSS, чтобы изменить семейство на такие вещи, как <strong>
. В качестве примера я использую полужирный шрифт, но такая же проблема возникает и для font-style
в дополнение к font-weight
.
Они объясняют это как обходной путь для ошибки iOS ( "это функция!" ): http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/
Но эта ошибка была исправлена в iOS 4.2: http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/
С этой настройкой, если я не пропущу что-то, я не мог использовать сторонний CSS или скрипты, которые пытаются использовать font-weight
, потому что подход fonts.com разбивает свойства CSS font-weight
и font-style
полностью. Вместо использования font-weight вы должны составить собственный CSS-класс для "mybold" или что-то подобное, чтобы установить семейство шрифтов в "Foo Bold". т.е. они нарушают стандартный CSS. (Что мне не хватает?)
Возможно, они когда-нибудь это исправит. Но тем временем может кто-нибудь подумать об разумном обходном пути? Нет способа определить семейство "Foo" с точки зрения их "Foo Bold" и т.д. @font-face
есть определения? Напишите какой-нибудь сумасшедший JavaScript, чтобы извлечь URL-адреса из их CSS на лету, а затем динамически определить мою собственную @font-face?
( "использовать другой шрифт с другой услугой" не считается ответом;-) да, я подумал об этом, но мне интересно, есть ли способ "исправить" webfonts.fonts.com, как-то подстроить их CSS с моими собственными правилами CSS или JavaScript.)