Многие популярные шрифты, по-видимому, доступны для веб-использования исключительно с 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 нарушает свойства font-weight и font-style CSS полностью. Вместо использования font-weight вы должны создать собственный класс CSS для «mybold» или что-то подобное, чтобы установить для семейства шрифтов «Foo Bold». то есть они нарушают стандартный CSS. (Что мне не хватает?)
Может, когда-нибудь это исправят. Но в то же время, может кто-нибудь придумать разумный обходной путь? Нет никакого способа определить семейство "Foo" в терминах их "Foo Bold" и т. Д. @font-face определения есть? Напишите какой-нибудь сумасшедший JavaScript, чтобы извлекать URL-адреса из их CSS на лету, а затем динамически определять мой собственный @ font-face?
(«использовать другой шрифт с другим сервисом» не считается ответом ;-) да, я думал об этом, но мне интересно, есть ли способ «исправить» webfonts.fonts.com, каким-то образом подправив их CSS с моими собственными правилами CSS или JavaScript.)