Подтвердить что ты не робот

Есть ли способ исправить объявления fonts.com @font-face?

Многие популярные шрифты, по-видимому, доступны для использования в Интернете исключительно из 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.)

4b9b3361

Ответ 1

Я написал небольшой загрузчик Javascript для Fonts.com, который позволяет использовать несколько весов для семейства шрифтов. Он основан на подходе rossi, но преобразован в повторно используемый script. Проверьте код и использование в этот смысл.

В основном он загружает CSS из fonts.com, изменяется в соответствии с указанными параметрами и добавляется к <head> вашего документа.

В вашем JS:

FontsComLoader.load('HelveticaNeueFontsCom', 'https://fast.fonts.net/cssapi/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.css', {
    'W02-55Roma': '400',
    'W02-75Bold': '700'
});

В вашем CSS:

.helvetica-regular,
.helvetica-bold {
    font-family: 'HelveticaNeueFontsCom', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.helvetica-regular {
    font-weight: 400;
}

.helvetica-bold {
    font-weight: 700;
}

Ответ 2

К сожалению, это все еще проблема почти два года спустя, и Fonts.com не планирует немедленного изменения способа объявления шрифтов (спросил их в Twitter).

Однако, если вы используете компилятор CSS (например, SASS), вы можете легко решить эту проблему с помощью вложенных стилей... Единственный недостаток - это больше кода, чем использование простого объявления о шрифте.

Отбрасывая этот код здесь, если кто-то наткнется на этот старый поток, как я сделал!

h1 {
    font-family: "PMNCaeciliaW01-75Bold", Georgia, Times, serif;

    b, strong {
        font-family: "PMNCaeciliaW01-85Heavy", Georgia, Times, serif;
    }
    i, em {
        font-family: "PMNCaeciliaW01-76BoldIt", Georgia, Times, serif;
    }
    b i, strong i,
    i b, i strong
    b em, strong em,
    em b, em strong {
        font-family: "PMNCaeciliaW01-86HeavyI", Georgia, Times, serif;
    }
}

Он не генерирует самый красивый CSS в мире, но он работает.

Ответ 3

Обновление 2014/01/16: Fonts.com теперь поддерживает стандартные шрифтовые шрифты. работает как следует, но в значительной степени устраняется сторонней поддержкой.


Во-первых, обратите внимание, что Fonts.com теперь утверждает, что семейные группы "в работах" . Тем временем, однако, на самом деле можно сделать обычные @font-face семейные вставки с использованием комплектов Fonts.com. [1]

Предположим, что объявление лица шрифта, которое они дают вам, похоже на это, где я заменил hash на имя файла шрифта в каждом случае: [2]

@font-face{
    font-family:"Minion W01 It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion W01 Regular";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

Затем, чтобы создать семейство шрифтов с хорошим именем, вы можете просто настроить эти объявления следующим образом:

@font-face{
    font-family:"Minion";
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: normal;
    font-style: normal;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

Что это; это так просто. Я уже тестировал это на одном из своих сайтов и работает так, как ожидалось. Очевидно, что для более старого браузера, который его не поддерживает, у вас будут проблемы (проблемы, которые Typekit адресует другими способами). Если вы используете fonts.com, это должно позаботиться об этом для вас.


Сноски

  • Примечание. Этот конкретный подход гарантирован только для самостоятельного размещения, а не для версии, которую размещает Fonts.com. Я подозреваю, что это может сработать для версии, которую они используют, но я не тестировал ее и не планирую в ближайшем будущем; если кто-то захочет и сообщит мне в комментарии, я с радостью обновлю ответ, чтобы это отразить.
  • Я использую hash здесь, потому что имена файлов выглядят так, как будто они генерируются путем запуска исходного имени файла через генератор хэшей. Поскольку это набор для самостоятельного размещения, эти имена не изменятся, и поэтому они будут продолжать работать. Благодаря комментарию vieron для указав, это потребовало уточнения.

Ответ 4

Прошел год, но я все еще не вижу желаемой функциональности в webfonts.fonts.com, поэтому я столкнулся с теми же проблемами, что и "Havoc P". Это выглядит довольно неприятно. К счастью, шрифты, которые мне нужны, также размещены на веб-сайте "webtype.com", что позволяет использовать стандартный подход "привязки к стилю", а также позволяет выделять жирные/курсивные имена разных семей, если вы хотите. Так что я просто пошел с ним.

Ответ 5

Я сделал это: (не потрудился очистить код, это может быть лучше/универсальнее, но я все равно опубликую его, вы получите идею) он использует document.stylesheets для Internet Explorer, потому что я не получал нагрузку на межсетевой css для работы с ним и $.get ajax load css для других браузеров. не проверял, т.е. ниже 8, но я думаю, что он даже работает там. есть немного мерцания в chrome на окнах (vista), но я думаю, что комбинация этого и google webfont-загрузчика сделала бы трюк.

<link rel="stylesheet" href="//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css" />
<script>
var data = "";
try
{
    data = document.styleSheets[document.styleSheets.length - 1].cssText;
    data = data.replace(/url\(/g, 'url(//fast.fonts.net');
    data = data.replace(/font-family: Geom Slab 703 W01 Light;/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family: GeomSlab703W01-LightIta;/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family: GeomSlab703W01-Medium;/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family: GeomSlab703W01-MediumIt;/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family: Geom Slab 703 W01 Bold;/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family: GeomSlab703W01-BoldItal;/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    document.styleSheets[document.styleSheets.length - 1].cssText = data;
}
catch (e)
{
}

$.get(location.protocol + '//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', function(data) {
    data = data.replace(/url\("/g, 'url("//fast.fonts.net');
    data = data.replace(/import url\(/, 'import url(//fast.fonts.net');
    data = data.replace(/font-family:"Geom Slab 703 W01 Light";/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family:"GeomSlab703W01-LightIta";/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family:"GeomSlab703W01-Medium";/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family:"GeomSlab703W01-MediumIt";/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family:"Geom Slab 703 W01 Bold";/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family:"GeomSlab703W01-BoldItal";/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    var s = $('<style type="text/css" />').appendTo('head');
    s.html(data);
});
</script>

ok, поэтому мне не нужно больше, чем этот быстрый взлом для моего текущего проекта, но если кто-нибудь закодирует очищенную/оптимизированную версию, я был бы рад услышать об этом.

Ответ 6

У Fonts.com теперь есть опция Family Grouping" для решения этой проблемы. Я не исследовал его полностью, но похоже, что он был выпущен около сентября 2013 года.

Ответ 7

Хотя я понимаю, что это немного больше работы, есть альтернативный метод, который должен позволить конечный результат, на который вы нацеливаетесь: API загрузчика Google WebFont (с нашей службой, предоставляющей шрифты).

По сути, Google построил API AJAX, который вы можете использовать с нашей службой. Преимущества включают возможность обнаружения статуса загрузки шрифтов - API динамически стирает HTML-тег страницы разными классами на основе того, не загружается (неактивен) шрифт, загружается (загружается) или успешно загружается ( активный). Затем вы можете использовать некоторые умные правила CSS, чтобы воспользоваться этими классами.

Дополнительную информацию можно найти в блоге и Документация Google.

Ответ 8

Робертс дал лучший ответ в качестве комментария к исходному вопросу. Fonts.com использует наиболее приемлемую версию @font-face (в это время), которая не использует объявление шрифта и веса из-за пятнистой поддержки кросс-браузера.