Перейти к содержимому

Как подключить шрифты в less

  • автор:

Как подключать шрифты в LESS?

https://gist.github.com/zhdanovartur/6121601
Нагуглил такую процедуру, но я как-то не разобрался, и не думаю, что разработчиками не предусмотрено подключение нестандартных шрифтов.

  • Вопрос задан более трёх лет назад
  • 8578 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 2

lenaShelest @lenaShelest

Я для этого сделала примесь:

.font(@fontName; @urlName: @fontName; @weight: normal; @style: normal) < font-family: '@'; src: url('/fonts/@/@.eot'); src: url('/fonts/@/@.eot#iefix') format('embedded-opentype'), url('/fonts/@/@.woff') format('woff'), url('/fonts/@/@.ttf') format('truetype'), url('/fonts/@/@.svg') format('svg'); font-weight: @weight; font-style: @style; >

Потом вызываю её:

@font-face < .font(@fontRegular); >@font-face

Предварительно задав переменные с необходимыми шрифтами:

@fontRegular: 'OpenSans'; @fontBold: '@-Bold';

На выходе получаю готовый CSS =)

@font-face < font-family: 'OpenSans'; src: url('/fonts/OpenSans/OpenSans.eot'); src: url('/fonts/OpenSans/OpenSans.eot#iefix') format('embedded-opentype'), url('/fonts/OpenSans/OpenSans.woff') format('woff'), url('/fonts/OpenSans/OpenSans.ttf') format('truetype'), url('/fonts/OpenSans/OpenSans.svg') format('svg'); font-weight: normal; font-style: normal; >@font-face < font-family: 'OpenSans'; src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot'); src: url('/fonts/OpenSans-Bold/OpenSans-Bold.eot#iefix') format('embedded-opentype'), url('/fonts/OpenSans-Bold/OpenSans-Bold.woff') format('woff'), url('/fonts/OpenSans-Bold/OpenSans-Bold.ttf') format('truetype'), url('/fonts/OpenSans-Bold/OpenSans-Bold.svg') format('svg'); font-weight: bold; font-style: normal; >

Вот, собственно, и всё) Может кому будет полезно.

Ответ написан более трёх лет назад

Подключение веб-шрифтов с помощью @font-face

Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.

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

Подключение веб-шрифтов с помощью @font-face:

  • подключение нестандартного шрифта с помощью директивы
@font-face
font-family
@font-face

указывает (название говорит само за себя — директива!) браузеру сделать две вещи:

  • создать указываемое имя шрифта
  • загрузить глифы для шрифта из указанного ею места
font-family

указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически — это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) — это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

Формат SVG — это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть — математических формул.

Благодаря этому изображения в таком формате масштабируются без потери качества — при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт — это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов — “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

  • The League of Movable Type (https://www.theleagueofmoveabletype.com/)
  • FontSquirrel (http://www.fontsquirrel.com/)
  • Google Fonts (https://www.google.com/fonts)
  • The Open Font Library (http://openfontlibrary.org/ru)
  • Fontex.org (http://fontex.org/)
  • Exljbris Font Foundry (http://www.exljbris.com/)

The League of Movable Type

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

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

@font-face

Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

Порядок указания форматов шрифтов в директиве

@font-face

важен и должен быть следующим:

@font-face font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot#iefix') format('embedded-opentype'), url('PTSansRegular.woff') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); >
  • EOT — формат только для Internet Explorer 8 и ниже
  • WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
  • TTF — сравнительно большой по размеру шрифт и достаточно устаревший
  • SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

Браузер читает тело директивы

@font-face

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

@font-face

является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков.

h1 font-family: 'League Gothic', Arial, sans-serif; font-weight: normal; >

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.

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

  • The Big List of Flat Icons & Icon Fonts
  • HTML for Icon Font Usage
  • Icon Fonts are Awesome
  • Шрифтовые иконки и сервис IcoMoon

Виды шрифтов

При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега

strong

у нас действительно получается полужирный шрифт; при указании сделать текст курсивным через тег
текст действительно делается курсивным; а при полужирном курсиве через теги

strong em

он делается полужирным курсивом. Нам кажется, что браузер делает текст таким, каким мы указываем ему.

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь — попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название

oblique

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

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

@font-face

значительно осложняется и может быть выполнено двумя способами: простым, который IE8 не понимает (но понимают все остальные браузеры) и сложным, который будет доступен и IE8 также.

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве

Как импортировать шрифты из сети в LESS?

T_H

windows-server

  • Windows Server
  • +2 ещё

Почему перестают работать некоторые шрифты после ввода в домен?

  • 2 подписчика
  • 10 янв.
  • 102 просмотра

css

  • CSS
  • +1 ещё

Как кастомизировать существующий шрифт для сайта?

  • 2 подписчика
  • 18 дек. 2023
  • 140 просмотров

шрифты

  • Шрифты

Как объединить несколько шрифтов в файл?

  • 1 подписчик
  • 15 дек. 2023
  • 62 просмотра

шрифты

  • Шрифты
  • +1 ещё

Как вернуть выделение жирным шрифтом непрочитанных писем в Roundcube?

  • 1 подписчик
  • 05 дек. 2023
  • 53 просмотра

шрифты

  • Шрифты
  • +1 ещё

Шрифт из Фигмы ожидание — реальность?

  • 1 подписчик
  • 03 дек. 2023
  • 158 просмотров

css

  • CSS
  • +1 ещё

Как управлять высотой строки шрифта?

  • 1 подписчик
  • 24 нояб. 2023
  • 84 просмотра

дизайн

  • Дизайн
  • +1 ещё

Какой кириллический шрифт максимально похож на BasicCommercial LT(пример внутри)?

  • 2 подписчика
  • 14 нояб. 2023
  • 172 просмотра

шрифты

  • Шрифты

Каким шрифтом можно заменить intro rust base?

  • 1 подписчик
  • 14 нояб. 2023
  • 43 просмотра

программное-обеспечение

  • Программное обеспечение и интернет-сервисы
  • +3 ещё

Где можно сгенерировать текст как на картинке?

  • 3 подписчика
  • 15 окт. 2023
  • 157 просмотров

windows

  • Windows
  • +2 ещё

Как выяснить, какие шрифты требуются приложению?

  • 1 подписчик
  • 15 окт. 2023
  • 100 просмотров

от 180 000 до 200 000 ₽

До 350 000 ₽

Aston (ex. Andersen) • Санкт-Петербург

от 70 000 до 80 000 ₽

18 янв. 2024, в 15:54

3000 руб./за проект

18 янв. 2024, в 15:43

1000 руб./за проект

18 янв. 2024, в 15:10

33333 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

  • Как занести в таблицу БД наименование компьютера, наименование ОС сопоставимому IP-адресу компьютера?
    • 2 подписчика
    • 3 ответа
    • 2 подписчика
    • 1 ответ
    • 3 подписчика
    • 0 ответов
    • 3 подписчика
    • 0 ответов
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 1 ответ
    • 5 подписчиков
    • 3 ответа
    • 2 подписчика
    • 0 ответов
    • 3 подписчика
    • 2 ответа
    • 4 подписчика
    • 1 ответ

    Не могу подключить шрифт в LESS

    В общем решил на свой сайт сайт вставить кастомный шрифт, скачал, а вот как подключить? Если пишу при помощи LESS есть ли какой нибудь способ?

    Лучший ответ

    Обычный CSS, нужен шрифт в форматах woff2, woff.
    Ну и стандартно: назвать, определить насыщенность, определить пути.

    @font-face font-family: ‘Roboto Condensed’;
    src: url(‘../fonts/Robotocondensed.woff2’) format(‘woff2’), url(‘../fonts/Robotocondensed.woff’) format(‘woff’), url(‘../fonts/Robotocondensed.ttf’) format(‘truetype’);
    font-weight: 400;
    font-style: normal;
    >

    VotesГуру (2925) 6 лет назад
    Не получается
    Остальные ответы

    less все схавает то что и css // главное правильно прописать путь.
    Aljebro правильно написал, но должна быть такая структура: файл стилей должен в папке (например less или css)
    лежать, а шрифтs в папке fonts// две точки и слеш перед fonts это выход из папки со стилями. если файл стилей прямо в корне, то эти точки и слеш убрать.

    Похожие публикации:
    1. Как активировать код в app store
    2. Как задать интервал в маткаде
    3. Как преобразовать строку в число php
    4. Как убрать двустороннюю печать по умолчанию mac

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

https://kapelnicza.vyvod-iz-zapoya-na-domu-voronezh.ru/