Рубрика «шрифты»

Как мы устраняли ошибку Chrome, скрывавшуюся в коде со времён совместимости с Windows XP - 1

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

1%

Наши метрики показывают, что Chrome в среднем быстр, но временами может заметно притормаживать. Подобные страдания пользователей видны в 99-м перцентиле многих метрик, но невоспроизводимы, а поэтому с ними довольно сложно работать. Более глубокий анализ данных показывает, что «длинный хвост» производительности свойственен не 1% пользователей на медленных машинах, а множеству пользователей в 1% от общего времени.

Давайте поговорим об этом 1%. Читать полностью »

image

Поднимите руку, если когда-нибудь сталкивались с такой ситуацией: вы получили текст со странными прямоугольниками или вопросительными знаками.

Система font fallback: что происходит, когда шрифт не может найти нужный символ - 2

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

Система font fallback: что происходит, когда шрифт не может найти нужный символ - 3

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

Система font fallback: что происходит, когда шрифт не может найти нужный символ - 4

Или вы разобрались, как использовать эти шрифты в Twitter, но кто-то попросил вас подумать о читателях или жаловался, что видит только пустые квадраты.
Читать полностью »

Многим известна проблема трёхмерной графики — отсутствие легковесных кроссплатформенных решений в вопросе вывода текста.

Большинство реализаций позволяет использовать выбранный шрифт в виде текстуры. Публикуемая библиотека ttf2mesh реализует другой способ — она преобразует векторные символы TrueType шрифта в сеточные объекты. Это позволяет выводить текст в виде набора треугольников.

image

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

Читать полностью »

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

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

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов - 1
Читать полностью »

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

  • Количество запросов на загрузку файлов шрифтов.
  • Размеры файлов шрифтов.
  • Время до первого рендеринга страницы.

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

О позитивном влиянии вариативных шрифтов на производительность веб-проектов - 1
Читать полностью »

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

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

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

  1. Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
    • Сократить запросы, блокирующие рендеринг
    • Избегать последовательных цепочек
    • Повторно использовать соединения с сервером
    • Сервис-воркеры для мгновенного рендеринга
  2. Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
    • Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
    • Проверить, что хэши частей пакета не меняются без необходимости
    • Запрашивать данные для страницы до загрузки всего приложения
    • Не блокировать рендеринг загрузкой второстепенных данных
    • Рассмотреть рендеринг на стороне сервера
  3. Следующая страница: сколько времени требуется для перехода на следующую страницу
    • Запрашивать дополнительный код до того, как он понадобится
    • Кэшировать и повторно использовать данные на клиенте

Читать полностью »

Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о том, почему он выполняет предварительную загрузку шрифтов даже тогда, когда не должен этого делать.
Предварительная загрузка шрифтов - 1
Когда он создавал тот сайт, на котором опубликован оригинал этого материала, он не собирался использовать на нём никаких собственных шрифтов. Это неизбежно повлияло бы на производительность сайта, пусть и не очень сильно. Автор статьи говорит, что он стремился к тому, чтобы сделать быстрый сайт. Однако в итоге решено было использовать один особый шрифт для заголовков страниц и при этом постараться сделать так, чтобы данное решение как можно меньше повлияло бы на производительность проекта.
Читать полностью »

Нихао, читатели!

Чувствую, что в этот раз вы реально заскучали по весточкам от нашего проекта! Целых семь месяцев мы работали, не покладая клавиатур, чтобы вы могли скачать и протестировать очередную версию нашей операционной системы. В ней было исправлено 226 багов, сделано 1140 изменения в исходном коде и специально для вашего удовольствия добавлены новые нескучные темы оформления

ReactOS 0.4.12: 华为, 你认为这个怎么样? - 1

Скачать образы системы | Пресс–релиз | Список изменений | TL;DR | Тесты и список регрессий

Несмотря на заявленный оперативный график формирования релизов раз в 3 месяца, окончательная подготовка выпуска 0.4.12, которая по традиции велась в отдельной ветке, заняла на этот раз немногим больше полугода. Причиной столь длительного процесса подготовки было желание нашего перфекциониста и релиз–инженера по совместительству, Иоахима Хензе, исправить как можно больше регрессий, накопившихся за последние несколько лет. В результате Иоахим добился устранения более 33 регрессий, что можно назвать впечатляющим результатом.

Читать полностью »

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

— Меня зовут Антон, я работаю разработчиком интерфейсов в команде партнерских интерфейсов Яндекс.Маркета. Cегодня я хочу поговорить про типографику в вебе.

Читать полностью »

Sans Forgetica: шрифт, который позволяет немного лучше запоминать прочитанное - 1

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

В 2011 году на экранах кинотеатров появился фильм «Области тьмы», который отчасти отображал заветную мечту многих — улучшить свою память и ускорить мыслительный процесс. На днях ученые из Королевского мельбурнского технологического института объявили о создании … нет, не таблетки, но шрифта, который позволяет улучшить «усваиваемость» прочитанного текста.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js