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

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

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

OTS говорит, что все в порядке.

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

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

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


person MatTheCat    schedule 27.12.2017    source источник
comment
Можете ли вы показать свой CSS, который вы используете для загрузки и применения шрифта?   -  person RoelN    schedule 03.01.2018
comment
CSS не проблема; правильно используются другие OTF.   -  person MatTheCat    schedule 04.01.2018
comment
Трудно пытаться понять, что не так без кода или шрифтов. Было бы полезно иметь (хотя бы один из них).   -  person RoelN    schedule 04.01.2018
comment
Я смогу предоставить шрифт завтра   -  person MatTheCat    schedule 04.01.2018
comment
Я добавил ссылку на один шрифт   -  person MatTheCat    schedule 05.01.2018
comment
Шаг 1: никогда не используйте otf, ttf, svg или eot в Интернете (тем более, что IE‹11 был дезавуирован Microsoft в январе 2016 года). Упакуйте источник otf как шрифт WOFF или WOFF2 с помощью инструмента Google woff, а затем просто используйте его.   -  person Mike 'Pomax' Kamermans    schedule 07.01.2018


Ответы (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 используйте как otfinfo -f Roboto-Regular.ttf для перечисления всех функций, поддерживаемых шрифтом.

Вот список функций шрифта Roboto:

  • c2sc - Маленькие столицы из столиц
  • ccmp — Состав/Разложение Глифов
  • cpsp — Прописной интервал
  • dlig — Дискреционные лигатуры
  • dnom — Знаменатели
  • frac — дроби
  • керн — кернинг
  • лига — Стандартные лигатуры
  • lnum — Цифры футеровки
  • mark — Пометить позиционирование
  • mkmk — Отметить, чтобы отметить позиционирование
  • numr — Числители
  • onum — Фигурки в старом стиле
  • pnum — Пропорциональные фигуры
  • соль — стилистические альтернативы
  • smcp — Маленькие Столицы
  • ss01 — Стилистический набор 1
  • ss02 — Стилистический набор 2
  • ss03 — Стилистический набор 3
  • ss04 — Стилистический набор 4
  • ss05 — Стилистический набор 5
  • ss06 — Стилистический набор 6
  • ss07 — Стилистический набор 7
  • tnum — Табличные цифры
  • unic — юникейс

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

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

person van100j    schedule 07.01.2018
comment
Спасибо, но я понял, что мой вопрос не ясен, поэтому я отредактировал его: почему я не могу использовать этот шрифт в Интернете и как я могу его использовать? - person MatTheCat; 07.01.2018
comment
Что вы подразумеваете под функциями OpenType в Интернете? Вы хотите использовать переменные шрифты в Интернете? - person van100j; 08.01.2018
comment
Я обновил ответ, чтобы отразить ваш обновленный вопрос. Удалось ли вам использовать функции шрифта Roboto? - person van100j; 09.01.2018
comment
Да спасибо большое! Что мешало мне двигаться дальше, так это тот факт, что я думал, что функции открытого типа не могут существовать в TTF... - person MatTheCat; 09.01.2018
comment
Обратите внимание, что ttf и otf — это не разные шрифты, они оба являются шрифтами OpenType и отличаются только тем, как моделируют контуры глифов. Все остальное, например, метаданные и функции шрифтов, являются просто открытым типом (единственная причина, по которой они имеют разные расширения, — это удовлетворение старых технологий, таких как старые синтаксические анализаторы шрифтов и аппаратное обеспечение принтера). - person Mike 'Pomax' Kamermans; 11.01.2018

Создание шрифта из репозитория Roboto действительно создает недопустимый шрифт. Как вы установили, Chrome (и Firefox) отклоняет его. fontlint Fontforge выдает много ошибок, когда эта 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. Открытый тип.

person RoelN    schedule 09.01.2018

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

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

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

И все должно работать нормально.

person Mike 'Pomax' Kamermans    schedule 07.01.2018
comment
Подмножества woff и woff2 этого шрифта производят точно такое же поведение, поэтому я упомянул OTF только для того, чтобы не подвергать сомнению этап подмножества/преобразования. Я спросил о единственном, чего я не знаю, поэтому я хотел бы получить ответ только об этом. - person MatTheCat; 08.01.2018
comment
Тогда, пожалуйста, обновите свой пост, чтобы было ясно, что вы уже протестировали преобразование woff/woff2, чтобы исключить все данные OpenType, которые необходимы для шрифтов ttf/otf, но могут привести к отклонению OTS? - person Mike 'Pomax' Kamermans; 11.01.2018
comment
И, конечно же, с учетом сказанного, использование TTX для проверки того, что ваш шрифт действительно не поврежден, по-прежнему рекомендуется на 100%. - person Mike 'Pomax' Kamermans; 11.01.2018
comment
Что ж, шрифт не был поврежден, и тот факт, что я тестировал woff и woff2, не меняет того факта, что вы не ответили на мои вопросы. - person MatTheCat; 11.01.2018
comment
нет, но это действительно изменяет имеющуюся у нас информацию, которая позволяет нам попытаться ответить на ваш вопрос. Ваша первоначальная информация была о формате системного шрифта: не зная, что вы уже протестировали woff, первое, что я всегда всем говорю, это сначала сделать правильное преобразование woff, потому что в 90% случаев это устраняет проблему. Если вы не упомянули, что уже пробовали это, то нет причин больше думать о проблеме, пока не будет подтверждено, что это не работает, и упомянуто в сообщении. Вот как работает отладка: вы сначала предлагаете очевидные вещи, учитывая опубликованную информацию. - person Mike 'Pomax' Kamermans; 11.01.2018
comment
Возможно, вам нужно прочитать вопрос, прежде чем предлагать очевидное. В любом случае спасибо. - person MatTheCat; 11.01.2018
comment
возможно, вы не помните, что вы написали: я много лет работал над разбором шрифтов, я прочитал ваш вопрос три раза на тот случай, если вы обновили его между прочтениями, и текст, который я вам дал, до сих пор стоит, потому что вы вообще не упоминаете проверку woff или проверку TTX (которая сильно отличается от проверки OTS). У вас есть принятый ответ: это здорово, но это не меняет того факта, что ваш вопрос, как он написан, заслуживает ответа и комментариев, которые я дал вам независимо от этого. - person Mike 'Pomax' Kamermans; 11.01.2018