Подключить шрифт otf css: Как подключить локальный .otf шрифт? — Хабр Q&A

Свойство font-feature-settings является низкоуровневой функцией, предназначенной для обработки особых случаев, когда нет другого способа включить или получить доступ к функции шрифтов OpenType. В частности, это свойство CSS не должно использоваться для включения строчной капители (small caps).

• @font-face

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

• color
• color-adjust
• opacity

Синтаксис

/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: 'smcp';
font-feature-settings: 'smcp' on;
font-feature-settings: 'swsh' 2;
font-feature-settings: 'smcp', 'swsh' 2;
/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;

Значения

normal

текст отображается с настройками по-умолчанию.

<feature-tag-value>

При отображении текста список значений тега функции OpenType передается механизму компоновки текста для включения или отключения функций шрифта. Тег всегда является строкой из 4 символов ASCII. Если он имеет больше или меньше символов или содержит символы вне диапазона U+20 — U+7E, то все свойство недействительно. Значение представляет собой положительное целое число. Два ключевых слова on и off синонимы для 1 и 0 соответственно. Если значение не задано, по умолчанию используется значение 1. Для небулевых функций OpenType (например, стилистических альтернатив) значение подразумевает выбранный глиф; для булевых значений это переключатель.

Список функций

• OpenType Layout tag registry

Значение по-умолчанию:

font-feature-settings: normal;

Применяется к: ко всем элементам, включая ::first-letter и ::first-line.

Спецификации

• CSS Fonts Module Level 3

Поддержка браузерами

Описание и примеры

/* use small-cap alternate glyphs */
.smallcaps {
  font-feature-settings: 'smcp' on;
}
/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps {
  font-feature-settings: 'c2sc', 'smcp';
}
/* enable historical forms */
.hist {
  font-feature-settings: 'hist';
}
/* disable common ligatures, usually on by default */
.noligs {
  font-feature-settings: 'liga' 0;
}
/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: 'tnum';
}
/* enable automatic fractions */
.fractions {
  font-feature-settings: 'frac';
}
/* use the second available swash character */
.swash {
  font-feature-settings: 'swsh' 2;
}
/* enable stylistic set 7 */
. fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: 'ss07';
}

Браузерная совместимость TTF/OTF — поддержка шрифтов TrueType и OpenType | Оценка кроссбраузерной совместимости TTF/OTF

Последнее обновление: 30.06.2022

Примечание:

TTF/OTF — поддержка шрифтов TrueType и OpenType показывает оценку совместимости браузера 100 . Это общая оценка из 100, отражающая поддержку браузером веб-технологии. Чем выше этот показатель, тем выше совместимость браузера. Оценка совместимости браузера не является 100% отражением для каждого браузера и поддержки веб-технологий. Тем не менее, он дает вам оценку того, насколько вы должны полагаться на конкретную веб-технологию с точки зрения совместимости браузера.

Обзор

Благодаря поддержке форматов шрифтов TrueType (.ttf) и OpenType (.otf) в CSS3 @font-face можно легко добавлять шрифты профессионального качества любого размера и стиля в дизайн вашего веб-сайта.

Code snippets

fonts.css

Source:fonts.css

tikz-fonts.css

Source:tikz-fonts.css

source-sans-pro.css

Источник: source-sans-pro.css

Совместимость с браузером

• TTF/OTF — поддержка шрифтов TrueType и OpenType в IE полностью не поддерживается ни в одной из версий, частично поддерживается в 9-11 и не поддерживается в 5.5-8 версиях IE.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Edge полностью поддерживается в 12-103, частично поддерживается ни в одной из версий и не поддерживается в версиях ниже 12 Edge.
• TTF/OTF — поддержка шрифтов TrueType и OpenType на Firefox полностью поддерживается в версиях 3.6-104, частично поддерживается ни в одной из версий и не поддерживается во 2-3 версиях Firefox.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Chrome полностью поддерживается в 4-106, частично поддерживается ни в одной из версий и не поддерживается в версиях ниже 4 Chrome.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Safari. полностью поддерживается в версиях 3.2–16, частично поддерживается ни в одной из версий и не поддерживается в версиях Safari ниже 3.2.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Opera полностью поддерживается в версиях 10-87, частично поддерживается ни в одной из версий и не поддерживается в версиях Opera 9.5-9.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Safari на iOS полностью поддерживается в версиях 4.2–16, частично поддерживается ни в одной из версий и не поддерживается в Safari 3.2–4 в версиях iOS.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в браузере Android полностью поддерживается в версиях 2.3-103, частично поддерживается ни в одной из версий и не поддерживается в версиях браузера Android 2.1-2.1.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Opera Mobile полностью поддерживается в версиях 10-64, частично поддерживается ни в одной из версий и не поддерживается в версиях Opera Mobile ниже 10.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Chrome для Android полностью поддерживается в 97-103, частично поддерживается ни в одной из версий и не поддерживается в ниже 97 Chrome для версий Android.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Firefox для Android полностью поддерживается в 95-101, частично поддерживается ни в одной из версий и не поддерживается в версиях Firefox для Android ниже 95.
• TTF/OTF — поддержка шрифтов TrueType и OpenType в Samsung Internet полностью поддерживается в версиях 4-17, частично поддерживается ни в одной из версий и не поддерживается в версиях Samsung Internet ниже 4.

Оценка совместимости браузера

Поддержка браузера для версий IE

—

Полностью

9-11

Частично

5,5-8

NO Support

Тест на IE

Brows.

—

Partially

2-3

No Support

Test on Firefox

Browser Support For Chrome Versions

4-106

Fully

—

Partially

—

No Support

Тест на Chrome

Поддержка браузером версий Safari

3. 2-16

Полная

—

Частично

—

Нет поддержки

Тест на браузерах Safari30003

10-87

Полностью

—

Частично

9,5-9

NO. Частично

3,2-4

Нет поддержки

Тест на сафари на iOS

Поддержка браузера для версий браузера Android

2,3-103

Полностью

—

Частично

2.1-2.1

—

.0003

NO Support

Тест на Android Browser

Бруузер Версии Chrome для Android

97-103

Полностью

—

Частично

—

Нет поддержки

Тестирование Chrome для Android

Поддержка интернет-браузеров Samsung

4-17

Полностью

—

Частично

—

Нет поддержки

Тестирование в Samsung Internet

Используйте возможности веб-сайтов и веб-приложений на основе Chromium для доставки приложений.

Попробуйте бесплатно

Отлаживайте веб-страницы на ходу с расширением LT Debug Chrome.

Добавить в Chrome

Протестируйте свой веб-сайт в более чем 3000 браузерах

Протестируйте свой веб-сайт в более чем 3000 реальных браузерах и операционных системах для мобильных и настольных компьютеров с помощью облака LambdaTest. Выполните тест на совместимость браузера для TTF/OTF — шрифты TrueType и OpenType поддерживают и многие другие веб-технологии, которые являются частью вашего веб-сайта или веб-приложения.

Тест сейчас

Последняя модифицированная дата

2022-06-30

Поддержка браузера для TTF/OTF-TrueType и Opentype Font Suppor

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Google Chrome

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Microsoft Edge

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Mozilla Firefox

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Internet Explorer

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Opera

Поддержка TTF/OTF — поддержка шрифтов TrueType и OpenType в Safari

Ссылки

Источник данных:

• — Консорциум World Wide Web (W3C) (https://www. w3.org/TR/)
• — CanIuse (https://caniuse.com/)
• — Веб-документы Mozzila MDN (https:/ /developer.mozilla.org/en-US/)
• — Web.Dev (https://web.dev/)
• — Статус платформы Chrome (https://chromestatus.com/features)
• — Функция WebKit Статус (https://webkit.org/status/)

Отладка веб-страниц на ходу с расширением LT Debug Chrome.

Добавить в Chrome

Используйте возможности движка на основе Chromium для создания адаптивных веб-сайтов и веб-приложений.

Попробуйте бесплатно

Протестируйте в реальном браузере

Протестируйте эту и другие функции вашего веб-сайта на совместимость с
3000 реальных браузеров и устройств, используя

Начать бесплатное тестирование

Была ли эта статья полезной?

X

Мы используем файлы cookie, чтобы предоставить вам лучший опыт. Файлы cookie помогают предоставить вам более персонализированный опыт и релевантную рекламу, а нам — веб-аналитику. Узнайте больше в нашей Политике использования файлов cookie, Конфиденциальности и Условиях обслуживания

Разрешить CookieCancel

Как загрузить собственный шрифт?

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

Обновлено: 06.10.21

Я проведу вас через все шаги по загрузке и добавлению ваших пользовательских шрифтов на ваш ЧИСТЫЙ веб-сайт. Прежде чем мы начнем, вот краткий контрольный список того, что вам нужно перед тем, как приступить к делу.

1. Ваши фактические файлы шрифтов.
2. Ваша дочерняя тема настроена и готова к работе
3. Уверенное отношение. ЛОЛ 🙂

Шаг 1. Соберите все типы файлов шрифтов

Скорее всего, у вас есть файлы шрифтов только одного типа. Обычно это файл . ttf или .otf . Но вам нужны все три из следующих типов файлов, чтобы заставить это работать. Вам нужно:

• .eot
• .woff
• .ttf

Если у вас уже есть эти типы файлов, я очень впечатлен! Если нет, то все хорошо. Перейдите на этот веб-сайт, чтобы преобразовать то, что у вас есть, в типы файлов, указанные выше. https://onlinefontconverter.com/

Шаг 2. Загрузите файлы шрифтов в файловый менеджер

Теперь, когда у вас есть файлы шрифтов, откройте файловый менеджер HubSpot.

Если вы любите организованность, как и я, создайте папку с именем fonts и загрузите в нее все файлы шрифтов. Мой выглядит так.

Не закрывайте это окно, так как оно понадобится вам на следующем шаге.

Шаг 3. Подготовьте дочернюю тему

Перейдите в раздел «Инструменты дизайна» HubSpot и нажмите на дочернюю тему, которую вы настроили. Если вы недавно настроили это, вы увидите добавление файла child. css . При создании дочерней темы у вас была возможность переименовать этот файл. Если вы это сделали, найдите этот файл.

Скорее всего, этот файл пуст и выглядит так.

Если вы уже добавили в этот файл пользовательский CSS, все в порядке.

Скопируйте приведенный ниже фрагмент кода CSS и вставьте его в файл child.css . Это значительно облегчит вам жизнь.

Теперь ваш файл child.css должен выглядеть примерно так…

Шаг 4. Создайте @font-face для каждого шрифта

В верхней части файла CSS в строке с номером 5 вы увидите атрибут @font-face. Для каждого файла шрифта, который у вас есть, вам нужно создать для него @font-face.

Давайте заполним этот заполнитель @font-face, а затем вы сможете просто копировать/вставлять блок столько раз, сколько вам нужно.

Вернитесь на вкладку с файловым менеджером.

Найдите файл . eot тип файла вашего пользовательского шрифта, а затем нажмите копировать URL .

Вернитесь к файлу child.css и вставьте URL-адрес

Выделите имя файла-заполнителя (не забудьте оставить знак ? в конце), а затем вставьте URL-адрес вашего файла.

Повторите этот процесс для файлов .woff и .ttf.

Примечание. Эти другие типы файлов не требуют «?» в конце, так что не волнуйтесь, если вы этого не видите.

Назовите семейство шрифтов

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

Промойте и повторите

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

• Hyperwave-Regular
• Hyperwave-полужирный
• Hyperwave-Bold
• Hyperwave-черный

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

Шаг 5: Атрибутируйте свой шрифт для каждого элемента типографики

Я сделал все возможное, чтобы сделать вашу жизнь супер легкой и указать все различные элементы типографики, которые вы и настраиваете. Когда вы прокручиваете файл CSS, ищите заполнитель с именем 9.0007 Font-Name , который вы замените именами шрифтов, которые вы только что создали.

Обновите, где бы вы ни видели Font-Name, и когда вы закончите, просто нажмите кнопку Publish . Вот и все! Вы закончили с трудной частью.

Шаг 6: Настройки темы типографики

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