Сжать шрифт css – Как сделать плавно увеличивающийся размер шрифта на CSS? — Хабр Q&A

CSS свойство font-stretch | назначение, допустимые значения, примеры

Допустимые значения

• normal — обычная ширина символов в шрифте
• semi-condensed — узковатая ширина символов в шрифте
• condensed — узкая ширина символов в шрифте
• extra-condensed — очень узкая ширина символов в шрифте
• ultra-condensed — самая узкая ширина символов в шрифте
• narrower — ширина символов в шрифте уже, чем у родительского элемента
• semi-expanded — широковатая ширина символов в шрифте
• expanded — широкая ширина символов в шрифте
• extra-expanded — очень широкая ширина символов в шрифте
• ultra-expanded — самая широкая ширина символов в шрифте
• wider — ширина символов в шрифте шире, чем у родительского элемента
• inherit — ширина символов в шрифте такая же как у родительского элемента

Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.

Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.

Аналогично, относительное значение narrower сужает ширину буквы на один пункт.

Пример

p {
font-stretch:wider;


Твой код:

Результат:

Заметки

Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.

На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.

CSS свойство font-stretch | назначение, допустимые значения, примеры

Свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.

Допустимые значения

• normal — обычная ширина символов в шрифте
• semi-condensed — узковатая ширина символов в шрифте
• condensed — узкая ширина символов в шрифте
• extra-condensed — очень узкая ширина символов в шрифте
• ultra-condensed — самая узкая ширина символов в шрифте
• narrower — ширина символов в шрифте уже, чем у родительского элемента
• semi-expanded — широковатая ширина символов в шрифте
• expanded — широкая ширина символов в шрифте
• extra-expanded — очень широкая ширина символов в шрифте
• ultra-expanded — самая широкая ширина символов в шрифте
• wider — ширина символов в шрифте шире, чем у родительского элемента
• inherit — ширина символов в шрифте такая же как у родительского элемента

Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.

Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.

Аналогично, относительное значение narrower сужает ширину буквы на один пункт.

Пример

p {
font-stretch:wider;
}

Твой код:

Результат:

Заметки

Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.

На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.

Производительность веб-шрифтов / Habr

Применение веб-шрифтов становится все популярнее: согласно HTTP Archive, за последний год число сайтов, использующих дополнительные шрифты, выросло вдвое — с 6 до 12%.

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

Оптимизация

• WOFF (Web Open Font Format): открытый сжатый формат шрифта OpenType или TrueType, поддерживающий дополнительные метаданные.
• TTF: всем знакомый, старый добрый TrueType.
• EOT (Embedded OpenType): компактный формат OpenType-шрифтов.
• SVG (Scalable Vector Graphics): формат векторной графики (об это я уже писал).

Но ни один из них не обеспечивает кроссбраузерность (проверить поддержку можно на сайте caniuse.com: woff, ttf, eot, svg), поэтому желательно использовать несколько форматов одновременно. И тут мы сталкиваемся с проблемой производительности: файл шрифта сам по себе достаточно массивен, к примеру шрифт Arial, поддерживающий все языки,

К примеру шрифт Open Sans — один из самых популярных Google Web Fonts, включающий все языки, весит 217 килобайт, но размер можно уменьшить, если использовать только один набор — latin. тогда размер уменьшится до 36 килобайт:

Вот, как можно подключить только часть шрифта (latin):

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />

Размер файла может быть снижен, если удалить дополнительные метаданные Font-хинтинга для браузеров, где эта технология не поддерживается. Font-hinting — часть процесса растеризации шрифта, используется для улучшения отображения текста на странице.

Улучшенные алгоритмы сжатия позволяют сократить размер файла на 15%, а ожидаемый в скором будущем формат WOFF 2.0 позволить сжимать на 30% лучше.

Для подключения только части символов («H», «e», «l» и «o») можно использовать следующий код:

<link href="http://fonts.googleapis.com/css?family=Inconsolata&text=Hello" rel="stylesheet" />

Использование

Вот как это работает:

CSS-стили, используемые в сервисе Google Web Fonts являются динамическими: они автоматически определяют подходящий формат для конкретного пользователя и его браузера. CSS-стили кэшируются на 24 часа. Внутри стиля находится ссылка на сам файл шрифта. Кэш самого шрифта хранится целый год! Учитывая популярность веб-шрифтов, очевидно, что в кэше уже есть копия того же Open Sans.

Существует также полезный инструмент — Javascript Font Loader от Google, позволяющий отображать процесс загрузки веб-шрифтов. Использовать достаточно просто:

h2 {
    visibility: hidden;
}
.wf-active h2 {
    visibility: visible;
}

А javasript обрабатывает действия:

WebFontConfig = {
    google: {
        families: [ 'Tangerine', 'Cantarell' ] // Google example
    },
    typekit: {
        id: 'myKitId' // Typekit example
    },
    loading: function() {
        // JavaScript to execute when fonts start loading
    },
    active: function() {
        // JavaScript to execute when fonts become active
    },
    inactive: function() {
        // JavaScript to execute when fonts become inactive (time out)
    }
};

Документация Loader’а

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

Вывод

Использованные материалы:

font-size-adjust | CSS справочник

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

Описание

CSS свойство font-size-adjust позволяет лучше контролировать размер шрифта, когда первый выбранный шрифт не доступен.

Когда первый заданный шрифт не доступен, браузер использует второй указанный шрифт. Это может привести к большой разнице в размера шрифта. Чтобы этого не случилось, используйте свойство font-size-adjust.

Все шрифты имеют «значение аспекта», которое равно разнице между строчной буквой «x» и прописной буквой «X». Когда браузер знает «значение аспекта» для первого выбранного шрифта, он может вычислить, какой размер шрифта использовать для второго выбранного шрифта при отображении текста.

Синтаксис

font-size-adjust: число|none|inherit;

Значения свойства

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    .divVerdana { font-family: verdana; }
    .divTimes { font-family: 'times new roman'; }

    #div1 { font-size-adjust: 0.58; }
    #div2 { font-size-adjust: 0.58; }
  </style>
</head>
<body>

  <div>
    Пример свойства font-size-adjust
  </div>
  <div>
    Пример свойства font-size-adjust
  </div>

  <br><br>

  <div>
    Пример свойства font-size-adjust
  </div>
  <div>
    Пример свойства font-size-adjust
  </div>

</body>
</html>

Результат данного примера в окне браузера:

шрифты — Можно ли сделать резиновый шрифт в css?

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация