Better fonts не работает

ClientFixer+BetterFonts #1

Comments

AngelCry commented Mar 6, 2015

не знаю, как лучше описать, суть в том, что хотелось бы хорошие шрифты. установлены:
[1.7.10]BetterFonts1.1.4.jar
ClientFixer-1.0.jar
OptiFine_1.7.10_HD_B5.jar
как видно на картинках, получается либо страшный шрифт и читабельные цифры кол-ва аспектов, либо наоборот (с выкл. и вкл поддержкой юникода соответственно). ну и кроме того, в обоих случаях BetterFonts похоже не работает. до установки ClientFixer шрифт был тот, который прописан в конфиге BetterFonts, но цифры кол-ва были так же не читабельны (собственно, поэтому я и пробовал установить ClientFixer). можно ли добиться нормального шрифта с сохранением читабельных цифр?

The text was updated successfully, but these errors were encountered:

gamerforEA commented Mar 8, 2015

А зачем одновременно держать ClientFixer и BetterFonts?

AngelCry commented Mar 8, 2015

гм. а кто его знает. я код не смотрел (жаву я практически не знаю), логика была такая: BetterFonts для возможности через конфиг выбрать TrueType шрифт, ClientFixer — что бы цифры можно было разобрать. я поэтому и спрашиваю, какая конфигурация нужна. тем более, я где-то на форуме видел ответ, что выбор шрифта не вписывается в рамки ClientFixer-а.

gamerforEA commented Mar 8, 2015

Я не знаю как добиться того, что вы хотите, так как не смотрел на рендер в ThaumCraft.

AngelCry commented Mar 8, 2015

а вот теперь я озадачен. во-первых ClientFixer уже делает то, чего я от него хотел — цифры стали такими как на первом скриншоте именно после его установки. во-вторых я и вышел на него именно так после долгого раскапывания форумов на тему не читабельных цифр (не только в ThaumCraft, тоже происходит насколько я знаю и в АЕ, и в некоторых других модах, при использовании интерфейса «обычный» вместо «крупный»). если это не предусматривалось, то это удачный сайд-эффект. я просто думал что можно совместить BetterFonts и ClientFixer, отдав первому рендер обычных шрифтов, а второму оставив рендер тех мелких (BetterFonts их почему-то не затрагивает). в итоге окончательно запутался. все, что я на данный момент понимаю — это то, что существует (как минимум) 2 шрифта, один используется для большинства текстов, второй — только в некоторых местах. но, не понятно, существует ли мод, который меняет рендер обоих. в любом случае, спасибо за ответы.

Источник

Просмотр шрифтов в фигме. Обзор плагина «Better font picker».

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

Просмотр шрифтов в Figma. Стандартный режим.

При просмотре и выборе шрифтов в стандартном режиме Figma не отображает вид шрифтов. Т.е. нельзя посмотреть как выглядит шрифт, будет только его название. Если вы хотите при подборе шрифтов видеть как он выглядит, то вам придёт на помощью плагин под названием «Better Font Picker».

Установка плагина «Better Font Picker» для просмотра шрифтов в фигме.

Устанавливаем плагин «Better Font Picker», который позволяет делать просмотр шрифтов в фигме. Для этого перейдите по ссылке и нажмите на кнопку для установки сверху.

Активация плагина «Better Font Picker» в Figma.

Чтобы активировать плагин для просмотра шрифтов «Better font Picker» в Figma нажмите на меню в верхнем левом углу. Затем наведите курсор на вкладку «Plagins» и выберите его из списка ваших плагинов.

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

Если вы интересуетесь темой шрифтов, то вам могут быть интересны эти материалы и видео уроки:

• Как добавить шрифт в фигму (Figma) за 2 минуты. Видео инструкция — инструкция поможет добавлять новые шрифты в фигму буквально за несколько кликов мыши.
• Красивые шрифты в фигме: 10 лучших на русском. Названия, примеры — делаю обзор безопасных шрифтов, которые стоит использовать в ваших проектах.

Заключение

Итак, вы этом видео и статье вы узнали как делать просмотр шрифтов в Figma с помощью специального плагина. Теперь вам будет более удобно искать подходящие вам шрифты для проектов.

Источник

5 полезных плагинов для Figma: работа с текстом и шрифтами

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

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

Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.

To Path

Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:

1. Скачайте плагин по ссылке.
2. Зайдите в Figma, нарисуйте кривую с помощью пера и напишите любой текст.
3. Выделите кривую и текстовый модуль.
4. Нажмите правой кнопкой мыши выделенные предметы, в выпадающем меню перейдите в пункт Plugins и нажмите на To Path.
5. В появившемся окне нажмите на кнопку Link.

Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:

Копирайтер, визуализатор, модель. Пишет статьи, стилизует съемки и участвует в них, изучает арт-критику в СПбГУ.

Better Font Picker

В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:

1. Скачайте плагин по ссылке.
2. Зайдите в Figma, создайте и выделите текстовый объект на макете.
3. Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.
4. Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.

Soroka

Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:

1. Скачайте плагин по ссылке.
2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.
3. В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.
4. Нажмите на любую пару — откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.

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

Fontiger

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

1. Скачайте плагин по ссылке.
2. Откройте проект в Figma и выберите любой фрейм с текстом.
3. Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.

Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.

Font Master

В Figma очень удобно следить за используемыми цветами — достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему — он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.

1. Скачайте плагин по ссылке.
2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.

Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:

обложка: Катя Павловская для Skillbox Media

Источник

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

Начало работы

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

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

И, наконец, ссылка на файл шрифта была размещена во встроенном в страницу CSS-коде, в верхней части HTML-кода, а не во внешнем CSS-файле.

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

Неожиданность

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

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

Когда же я проанализировал сайт, я был слегка шокирован.

Итак, взглянув на сайт с помощью инструментов разработчика Chrome и изучив его в Webpagetest, я обнаружил, что высокоприоритетный шрифт загружался после изображений — низкоприоритетных ресурсов.

Изображения загружаются до загрузки шрифта

Мне это показалось полной бессмыслицей.

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

Предварительная загрузка шрифтов как решение проблемы

Атрибут preload указывает браузеру на то, что ему необходимо заранее загрузить соответствующий ресурс, нужный для вывода текущей страницы.

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

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

Использование атрибута preload в применении к файлам шрифтов сообщает браузеру о том, что соответствующие шрифты понадобятся ему при выводе страницы.
Кроме того, этот механизм очень легко реализовать с использованием элемента
.

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

Я не ожидал, что на этом сайте мне придётся использовать механизмы предварительной загрузки ресурсов. Мой CSS-код весьма скромен, я встроил его в HTML-код страницы, поступив так для того, чтобы страницы быстрее выводились бы браузерами при первом посещении сайта. Так как мой шрифт не зависел от загрузки внешнего CSS-файла, браузер, в любом случае, должен был бы обнаружить его очень рано и без «подсказок» по поводу предварительной загрузки.

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

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

Предварительная загрузка и работа с файлом шрифта.

Возможно, полезнее будет рассмотреть раскадровку процесса загрузки страницы (здесь, для наглядности, использовалась имитация очень медленного соединения).

В верхней раскадровке предварительная загрузка не используется. В нижней — используется

Попутно отмечу, что я использовал дескриптор font-display: fallback . То есть — заголовок изначально выводился с использованием резервного шрифта в том случае, если мой шрифт загружался медленно. Однако для данного теста я эту возможность отключил, так как иначе очень сложно было бы различать этапы загрузки страницы.

Почему это сработало?

Для того чтобы вывести веб-страницу, браузеру нужно построить дерево DOM и дерево CSSOM, которые позже используются для построения дерева рендеринга.

Возникает такое ощущение, что использование для загрузки шрифта элемента
с атрибутом preload позволяет браузеру приступить к построению CSSOM до завершения создания DOM.

Увидеть это можно на следующих изображениях, на которых показано исследование процесса загрузки страницы с помощью инструментов разработчика Chrome.

Вот как выглядит работа с материалами страницы без использования предварительной загрузки. Сначала создаётся DOM и выполняется загрузка изображений, потом начинается создание CSSOM и выполняется загрузка шрифта.

Работа со страницей без использования предварительной загрузки

А вот — то же самое, но уже с применением предварительной загрузки. Здесь браузер приступает к созданию CSSOM, начинает загрузку шрифта, а потом уже создаёт DOM и начинает загрузку изображений.

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

Есть ли альтернативы предварительной загрузке?

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

Я, из любопытства, попытался реализовать вышеописанную идею и добавил к элементам, описывающим изображения, атрибут loading=»lazy» . В Chrome 76 (единственный браузер, который на момент написания статьи это поддерживал) это должно было бы понизить приоритет изображений, находящихся за пределами исходной видимой области страницы.

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

Разные браузеры ведут себя по-разному

Я протестировал проект в нескольких различных браузерах и на нескольких устройствах. В ходе испытаний я выяснил, что iOS Safari (iPhone 8) демонстрирует то же поведение, что и Chrome. А именно, шрифты, по умолчанию, загружаются после изображений, но использование атрибута preload позволяет исправить ситуацию.

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

В Edge шрифты тоже загружаются позже, чем хотелось бы. Возникло такое ощущение, что в Webpagetest использование атрибута preload сработало лишь частично. А именно, мне показалось, что это выглядит как двойная загрузка шрифта. Один раз он загружался раньше, второй раз — позже.

Я в предыдущем абзаце говорил о том, что у меня «возникло ощущение», и о том, что мне «показалось». Дело в том, что когда я попытался проверить это поведение с использованием собственной версии Edge, «двойные» загрузки пропали. Теперь у меня возникло такое ощущение, что использование атрибута preload не приводит к ускорению загрузки шрифтов. Возможно, такая разница в поведении страницы стала следствием исправления некоей ошибки в Edge, хотя если это так — ошибку исправили ценой изменения механизма предварительной загрузки ресурсов.

Итоги

Здесь мы поговорили о том, почему предварительная загрузка шрифтов не помешает даже в том случае, если ссылки на их файлы сделаны во встроенном в страницу CSS-коде.

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

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

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

Уважаемые читатели! Используете ли вы механизмы предварительной загрузки шрифтов в своих веб-проектах?

Источник