Автонастройка шрифтов и фона что такое
Dark Mode 2.0 в MIUI 12: затемнение обоев и настройка шрифтов
Компания Xiaomi уже довольно давно и весьма успешно использует свой собственный пользовательский интерфейс MIUI, который устанавливается поверх Android. Более того, хотя именно обновления операционной системы Android обычно вносят кардинальные изменения в функционал смартфонов, владельцы устройств от китайской компании больше всего ждут именно обновления MIUI. Ведь разработчик вносит различные заметные изменения в интерфейс, благодаря чему пользоваться смартфоном становится удобнее. На текущий момент в Xiaomi активно работают над пользовательским интерфейсом MIUI 12, релиз которого запланирован на следующую неделю. Однако компания уже сейчас презентовала некоторые изменения новой версии интерфейса.
Затемнение обоев
В интерфейсе MIUI 12 будет представлена функция Dark Mode 2.0 — это умное затемнение обоев. Теперь система вместо того, чтобы полностью затемнять обои с общим уровнем яркости, будет планомерно затемнять изображение на рабочем столе в течение дня. К сожалению, пока что не совсем понятно, будет ли данная функция работать исключительно с системными обоями, или же пользователь сможет включать Dark Mode 2.0 и для своих собственных изображений.
Настройка шрифтов
Также разработчики компании Xiaomi официально сообщили, что Dark Mode 2.0 теперь будет автоматически регулировать размер шрифта. Данная функция основана на динамической системе шрифтов из MIUI 11 — обновлённая функция будет самостоятельно уменьшать или увеличивать шрифт, убирать размытие текста и так далее. В компании считают, что эта система позволит сделать чтение более комфортным как в обычном, так и в «тёмном» режимах.
Контрастность шрифтов
Помимо размера шрифта, данная система также будет регулировать контрастность текста и фона, на котором этот текст выводится. Параметры будут меняться в зависимости от яркости экрана.
Теперь пользователь сможет с комфортом использовать Dark Mode в течение дня, сохраняя при этом читабельность текста, и пользоваться «тёмным» режимом ночью, не ослепляя себя излишней яркостью. И, естественно, это лишь малая часть того, что разработчик покажет в MIUI 12.
Dark Mode 2.0 в грядущей MIUI 12 включает в себя функции: затемнение обоев, автоматическую настройку шрифта и контрастности
Смартфоны Xiaomi известны и любимы потому, что поверх стандартного интерфейса Android установлена оболочка MIUI. Для пользователей других Android телефонов обновление операционной системы несёт множество нововведений, облегчающих жизнь. Но владельцы Xiaomi ждут обновления MIUI, потому что именно на ней сосредоточены основные силы инженеров и дизайнеров компании.
Сейчас активно идут работы над следующей версией оболочки MIUI 12, выпуск которой запланирован на следующей неделе.
Маркетологи Xiaomi начали активность в китайской социальной сети Weibo, в которой начали постепенно описывать новшества, которые ждут пользователей.
Первым делом Xiaomi сообщила, что довела до нового уровня систему масштбарирования фирменного шрифта MiLan Pro, который начал использоваться в MIUI 11. Также был показан тёмный режим версии 2.0, который улучшит уже существующую его версию 1.0, доступную в MIUI 11 тремя новыми функциями: автоматическое затемнение обоев, масштабирование шрифта и его контрастность.
MIUI 12: затемнение обоев
Dark Mode 2.0 в MIUI 12 будет содержать новую функцию затемнения обоев, но работать она будет интеллектуально. Можно было бы представить, что телефон просто снизит яркость для обоев и всё, но это не так, хитрые алгоритмы будут пытаться представить как бы изменилось освещённость фотографии, если бы мы на неё глядели в реальной жизни при постепенном уменьшении освещённости, иными словами, Xiaomi пытаются смоделировать как свет переходит внутри картинки в течении дневного цикла.
Маркетологи не уточнили будет ли эта функция работать только с системными обоями, или сможет моделировать освещение на любых пользовательских фотографиях.
MIUI 12: динамическое изменение свойств системного шрифта
В Dark Mode 2.0 войдёт новая функция по автоматической регуляции системного шрифта, которая в зависимости от режима отображения, тёмного или нормального, самостоятельно будет менять толщину начертаний, а также способна менять цвет, чтобы тест был хорошо виден в любом из выбранных режимах. Также система сможет менять блики (не совсем я понял что имелось ввиду под бликами) и размытие текста.
Эта функция работает только при активации тёмного режима, если вы не хотите её использовать, придётся пользоваться нормальным общим режимом работы.
MIUI 12: регулировка контрастности шрифта
В дополнении к предыдущей функции работы с шрифтами, будет добавлена возможность автоматического изменения как контраста самого шрифта, так и фона, на котором он размещён. Это позволит не отключать тёмный режим 2.0 даже днём, теоретически, вы без труда должны будете прочитать текст в интерфейсе MIUI 12, а ночью не напрягать зрение, как это иногда происходит сейчас.
Больше новостей про MIUI 12 мы узнаем во время анонса, который назначен на конец апреля 2020 года.
Тёмный режим в MIUI 12 на Xiaomi (Redmi): настройка, затемнение обоев и принудительная активация в сторонних приложениях
Не ошибусь, если скажу, что очень много людей используют тёмный режим на Xiaomi (Redmi), особенно это касается владельцев телефонов с AMOLED дисплеями, которые способны отобразить глубокий чёрный цвет.
Весьма удобная опция, вечером включив тёмную тему значительно снижается нагрузка на зрение, которое и без того за день устало и глаза требуют отдыха.
Но если в MIUI 11 затемнение было довольно простым и работало преимущественно с системными приложениями и интерфейсом рабочего стола, то сейчас на тех смартфонах Xiaomi, которые работают на базе Android 10 под управлением MIUI 12, появилась возможность принудительной активации чёрной темы в любом из установленных приложений даже если оно этот функционал не поддерживает.
Рассмотрим этот режим в MIUI 12 подробнее, для этого требуется войти в настройки и найти пункт «Экран». 
Далее выберите строку «Тёмный режим». 
Мы видим несколько настроек, первая строка принудительно активирует чёрную тему, переводя весь интерфейс на серые и тёмные оттенки. Вторая опция «Адаптировать обои» новая, она уменьшает контрастность и яркость обоев во время работы чёрной темы, крайне полезная возможность, ведь в предыдущей версии MIUI даже если чёрный режим был активен, яркие обои могли создать значительную нагрузку на зрение, сейчас это исключено. 
Следующая возможность «По расписанию» позволяет задать время активации и отключения специального режима, весьма удобно для автоматического включения его вечером, и отключения утром. 
При активации функции появляются две дополнительные возможности, первая называется «Отдельные приложения», она также появилась в MIUI 12 и базируется на новых возможностях Android 10, позволяя принудительно переводить любое из установленных сторонних приложений в тёмный режим даже если разработчики не предусмотрели подобную возможность. 
«Автоматическая контрастность» позволяет сохранить близкие к оригинальным цвета даже при интенсивном затенении при активной чёрной темы, рекомендую держать эту опцию активной. 
Настройка функции «Высококонтрастный текст» на устройствах Android
«Высококонтрастный текст» – это текст с наложением обводки. Благодаря этому намного лучше воспринимаются буквы и, соответственно, более комфортно читать информацию с экрана мобильного устройства. Появилась опция в версии ОС Android 8.0 Oreo.
Из статьи вы узнаете
Как выглядит?
Выглядит точно также, как и простой текст, только у него появляется обводка. При этом цвет обводки зависит от цвета самого шрифта. Если он окрашен в белый, то обводка будет черной, а если же шрифт черный, то обводка белая. То есть, цвет шрифта подвергается инверсии.
Сила обводки зависит от размера шрифта. В общем, обводка по толщине будет примерно равна толщине символов в шрифте.
Вот так выглядит обычная клавиатура:
А вот так выглядит клавиатура с включенной функцией:
Как видите, буквы и прочие символы стали более читаемы и видимы, но в то же время эстетически это выглядит менее красиво, чем было. Но людям, которым сложно прочесть обычный текст, будет все ровно на эстетическое удовольствие.
В чем польза?
«Высококонтрастный текст» нужен в первую очередь для того, чтобы было более удобно читать с экрана телефона или планшета.
Данная возможность будет полезной, когда шрифт очень маленький, либо прозрачный и тонкий. Благодаря включению функции шрифты становятся намного понятнее и выразительнее. Это позволяет комфортно воспринимать текст.
Где работает, а где не работает функция?
Работает везде, где есть текстовая информация. В приложениях, в системе, в настройках и так далее. Исключения – игры и программы, основанные на графическом интерфейсе (например, видеоплееры, аудиоплееры, галереи, видеочаты и так далее).
Вот список мест, где «высококонтрастный текст» будет работать точно:
Не будет работать в данных ветвях системы:
Инструкция по включению
Учтите, что версия Андроид на вашем устройстве должна быть 8.0 Oreo или выше.
Для включения следуйте инструкции:
Видимые изменения
Вот так будет выглядеть текст в настройках смартфона:
Обратите внимание, что изменен был весь текст: и в самих настройках, и в статус баре.
Для примера, вот так будет выглядеть шторка уведомлений:
А вот для сравнения меню всех приложений в лаунчере:
Это отображение по умолчанию. Выглядит нормально и симпатично, но текст почти не видно. Он тонкий, маленький и хорошо сливается с фоном, поэтому читаемость довольно плохая.
Но после включения функционала ситуация меняется. Текст превращается в более видимый, но из-за маленького размера выглядит это убого и нечитаемо. Вот так выглядит меню всех приложений с маленькими буквами и тонким шрифтом с активированной опцией:
Как мы и говорили, функция не всегда работает хорошо. Будет подводить с очень тонкими и маленькими шрифтами, на подобии того, который был в этом лаунчере на наших скриншотах. В остальном же никаких проблем нет.
Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.