альтернативы шрифта

Question

Моему клиенту (который одержим идеалом пикселей) не нравится, как браузеры отображают шрифтовые шрифты.

В настоящее время я использую font-squirrel для преобразования OTF-шрифтов в веб-шрифты.

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

Типичный пример дизайна, над которым я должен работать:

Каков будет ваш подход?

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

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

Answer 1

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

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

Третий вариант - встроить код base64 для шрифтов в ваш CSS. Это увеличивает размер (кбайт) ваших CSS-файлов, но полностью устраняет моргание, возникающее из-за того, что шрифт загружается с помощью CSS, поэтому при загрузке вторичного файла нет моргания.

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

 @font-face {
 font-family: "FontName";
 src: url("data:font/opentype;base64,[   the base64 code here   ]");
 }

Есть несколько сетевых конвертеров bas64, к которым вы можете передать файл .otf, и они выплюнут код base64. Вот один из таких преобразователей.

Answer 2

Похоже, оно было выделено жирным шрифтом.Попробуйте установить font-weight в нормальное состояние.

Answer 3

Подход, который я использовал, заключается в создании фоновых изображений для представления всего отображаемого текста, а затем с помощью CSS «скрывает» фактический текст и показывает только изображение.Для большей доступности текст не должен быть скрыт с помощью display: none или display: hidden.Вместо этого используйте большой отрицательный отступ для текста, чтобы переместить текст с левой стороны экрана, или поместите его во вложенный, абсолютно позиционированный элемент где-нибудь за пределами области отображения.

Я обычно использую отрицательный отступдля всего текста, не содержащегося в интерактивном элементе, и метод вложенного, абсолютно позиционированного элемента для всего, что содержится в интерактивном элементе (поэтому контур активного элемента не расширяется с левой стороны, как это может происходить в некоторых браузерах).*

Answer 4

Другим распространенным и популярным способом обработки является автоматическая замена шрифтов (с использованием JavaScript).Это решение удобно для пользователей программ чтения с экрана, поскольку HTML-код содержит простой текст, а замена выполняется в браузере с использованием JavaScript.

Примером этого метода является sIFR , которыйявляется открытым исходным кодом и использует Flash в качестве замены.