Не удалось декодировать OpenType Roboto

Я следовал инструкциям в репозитории Google / Roboto, но OTF-файл не может использоваться в качестве веб-шрифта.

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

ОТС говорит, что все в порядке.

Почему это так, и как я могу использовать функции Roboto opentype в Интернете?

К вашему сведению, я также открыл Google / Roboto#283

Вот один из сгенерированных шрифтов: https://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_

Источник

3 ответа

Решение

Обновление (на основе обновленного вопроса)

Очевидно, сгенерированный шрифт OTF не кодируется должным образом для Интернета - все браузеры имеют разные механизмы рендеринга шрифтов, и декодирование этого файла не выполняется в Chrome и Firefox, и даже отчеты Font Squirrel Шрифт поврежден и не может быть конвертирован. Как ни странно, в Safari все работает отлично.

Если вы хотите использовать функции шрифтов Roboto, вам придется создавать свои собственные веб-шрифты. Я создал демонстрационную страницу, которая демонстрирует некоторые функции шрифтов Roboto с различными веб-шрифтами (woff2, woff, otf, ttf) пройдя следующие шаги:

Как только вы запустите make в репозитории google/roboto вы должны получить шрифты TTF в RobotoTTF каталог. Эти файлы включают в себя все функции шрифтов Roboto, и вы можете использовать их для создания файлов веб-шрифтов. Если вы хотите, вы можете даже использовать шрифты TTF:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.ttf') format('truetype');
}

хотя размер вашего файла будет большим, и вы обязательно должны конвертировать их в другие форматы веб-шрифтов (woff2 дает лучшие результаты, и это поддерживается во всех современных браузерах), чтобы значительно уменьшить размер файла, поэтому ваш @font-face декларация будет:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.woff2') format('woff2');
}

Вы по-прежнему можете включать и использовать функции шрифтов в сгенерированных веб-шрифтах, а также использовать их в своем коде CSS:

.yourclass {
  font-feature-settings: ...;
}

Есть много инструментов, которые вы можете использовать, онлайн и на вашем компьютере. Я попробовал следующие, которые очень хорошо работают с сохранением возможностей OpenType в сгенерированных веб-шрифтах:

С другой стороны, вы можете найти полезные для LCDF Typetools, особенно в качестве otfinfo -f Roboto-Regular.ttf перечислить все функции, поддерживаемые шрифтом.

Вот список возможностей для шрифта Roboto:

  • c2sc - маленькие столицы из столиц
  • ccmp - Glyph Состав / Разложение
  • CPSP - Capital Spacing
  • dlig - дискреционные лигатуры
  • дном - знаменатели
  • ГРП - Фракции
  • керн - кернинг
  • лига - стандартные лигатуры
  • lnum - Подкладочные фигуры
  • mark - Mark Positioning
  • mkmk - Пометить в Позицию
  • numr - числители
  • onum - фигуры в старом стиле
  • pnum - пропорциональные показатели
  • соль - Стилистические альтернативы
  • smcp - малые столицы
  • ss01 - Стилистический набор 1
  • ss02 - Стилистический набор 2
  • ss03 - Стилистический набор 3
  • ss04 - Стилистический набор 4
  • ss05 - Стилистический набор 5
  • ss06 - Стилистический набор 6
  • ss07 - Стилистический набор 7
  • tnum - Табличные цифры
  • Unic - Unicase

Я надеюсь, что вы найдете это полезным.

** Удалено как не относящееся к обновленному вопросу

Источник

Создание шрифта из репозитория Roboto действительно приводит к неверному шрифту. Как вы установили, Chrome (и Firefox) отвергают его. Fontforge fontlint выдает много ошибок, когда проверяется OTF Roboto. Среди многих о несоответствии ширины адаванса можно сделать вывод:

ERROR      2 Self-intersecting glyph
ERROR      3 Wrong direction
ERROR      5 Missing points at extrema
FAIL         Roboto-Regular.otf

Эти ошибки только указывали на сломанные глифы, но это не должно заставлять Chrome полностью отклонять шрифт.

Ради интереса я нырнул, чтобы увидеть, что именно нарушает шрифт. После некоторой проверки я нашел две записи в таблице CFF, которые, по-видимому, содержат неверный шрифт:

<FamilyBlues value="0"/>
<FamilyOtherBlues value="0"/>

Удаление этих исправит шрифт. (Я добавлю это к проблеме, о которой вы сообщили)

Об использовании возможностей OpenType: многие функции макета могут быть включены через CSS, если они, конечно, в шрифте. Вы можете написать CSS самостоятельно (например, font-feature-settings: "liga"; для включения лигатур), или используйте удобную кросс-браузерную библиотеку CSS, такую ​​как Utility OpenType.

Источник

Не использовать otf, ttf, svg, или же eot шрифты в сети. Первые два - это универсальные шрифты OpenType с большим количеством данных, чем необходимо для работы в Интернете, включая данные, которые являются технически законными, но будут отвергнуты чрезмерно защищенными синтаксическими анализаторами, такими как OTS, а последние два года уже давно являются мертвыми форматами и никогда не должен использоваться.

Упакуйте исходный код (otf или ttf, выбор которого не имеет значения, если вы не знаете, почему это важно, а это означает, что вы довольно хорошо знакомы с внутренностями OpenType)) как шрифт WOFF или WOFF2 с чем-то вроде google's Утилита woff2 или TTX, а затем просто используйте это, и только это:

@font-face {
  font-family: Roboto;
  src: url(./assets/myfonts/roboto.woff2) format("woff2");      
}

И все должно работать просто отлично.

Источник
Другие вопросы по тегам