Используем системные шрифты на сайте
👋 Привет, в этой статье я попробую разобрать, как использовать системные шрифты на сайте и какие преимущества они дают.
Зачем использовать системные шрифты?
Есть на то несколько причин.
1. Производительность
Самая главная причина использования системных шрифтов — это производительность. Шрифты, как правило, являются одним из самых тяжеловесных ресурсов на сайте. Но если шрифт уже доступен на пользовательском компьютере, это исключает необходимость его скачивания. Таким образом можно сэкономить несколько сотен килобайт при каждой загрузке страницы. Делая загрузку ощутимо быстрее.
2. Ощущение «родной» системы
Ещё одно преимущество системных шрифтов в том, что они гармонично вписываются в системное окружение и создают чувство схожести с родными приложениями. Но это больше полезно веб-приложениям, таким как Вконтакте или GitHub, чем веб-сайтам.
3. Веб-сайтам не обязательно выглядеть везде одинаково
Хотя тот факт, что разные пользователи видят разные шрифты можно рассматривать как недостаток, в реальности это не важно.
Главное чтобы сайт везде работал, а выглядеть он может по-разному.
Какие недостатки у системных шрифтов?
1. Конфликты имен
Кроме -apple-system и BlinkMacSystemFont, обычно мы перечисляем имена остальных шрифтов через запятую. Но если у пользователя установлен другой шрифт под тем же именем, будет неприятный конфуз. Как раз это и случилось с Medium в первый же год после выхода на рынок.
2. Техническое обслуживание
Список шрифтов необходимо периодически обновлять, так как операционные системы со временем их меняют. К сожалению, пока только Apple предоставляет удобное сокращение -apple-system, означающее «просто дай мне системный шрифт». Вместо этого, нам пришлось бы указывать конкретные названия — San Francisco, Lucida Grande и т.д.
Сравнение вида шрифтов в разных операционных системахНабор шрифтов
На данный момент нет универсального набора шрифтов, подходящего для каждой операционной системы. Хоть они отчасти пересекаются, но все же у каждой ОС они свои.
Ниже перечислен список шрифтов и устройств, к которым они относятся:
| Название шрифта | Устройство |
|---|---|
| -apple-system (San Francisco) | iOS Safari, MacOS Safari, MacOS Firefox |
| BlinkMacSystemFont (San Francisco) | MacOS Chrome |
| Segoe UI | Windows |
| Roboto | Android, Chrome OS |
| Oxygen / Oxygen-Sans | KDE |
| Fira Sans | Firefox OS |
| Droid Sans | Старые версии Android |
| Ubuntu | Ubuntu |
| Cantarell | GNOME |
| Helvetica Neue | MacOS версии < 10.11 |
| Arial | Любое |
| sans-serif | Любое |
Примечание:насколько мне известно, Oxygen-Sans не поддерживает русский язык, лучше его не использовать.
Иначе русский текст будет некрасиво смотреться.
Порядок, в котором перечислены шрифты очень важен. Потому что всегда будет использован первый подходящий по имени шрифт. Значит и список нужно строить таким образом, чтобы подходил именно системный шрифт, а не любой, установленный у пользователя.
Поэтому мы начинаем с наиболее конкретных шрифтов и двигаемся, перечисляя более редкие. Например, первый шрифт -apple-system определен всегда. Но его увидят только лишь пользователи MacOS и iOS устройств. Далее по списку идёт Roboto, он скорее всего установлен на Mac’ах, но о конфликте мы можем не беспокоиться так как более конкретный шрифт -apple-system уже указан первым.
Примеры
Вконтакте
body {
font-family: -apple-system,
BlinkMacSystemFont,
Roboto,
Helvetica Neue,
sans-serif;
}WordPress 4.6
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}Medium
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}Ghost
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
}И наконец-таки, Github
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji", /* Смайлики */
"Segoe UI Emoji", /* Смайлики */
"Segoe UI Symbol"; /* Смайлики */
}Рекомендуемый набор
Я думаю, лучше всего использовать список шрифтов от WordPress, он хорошо протестирован и используется большим количеством пользователей.
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
} Но вне зависимости от выбранного метода, я советую протестировать сайт в различных браузерах и операционных системах, чтобы убедиться что результат вас устраивает.
Как изменить шрифт Windows 10
По умолчанию в Windows 10 для всех системных элементов используется шрифт Segoe UI и пользователю не предоставлены возможности для изменения этого. Тем не менее, изменить шрифт Windows 10 для всей системы или для отдельных элементов (подписей иконок, меню, заголовков окон) возможно и в этой инструкции подробно о том, как это сделать. На всякий случай рекомендую создать точку восстановления системы прежде, чем выполнять какие-либо изменения.
Отмечу, что это тот редкий случай, когда я рекомендую использовать сторонние бесплатные программы, а не ручную правку реестра: так будет проще, нагляднее и эффективнее.
- Изменение шрифта в Winaero Tweaker
- Advanced System Font Changer
- В редакторе реестра
- Видео инструкция
Изменение шрифта в Winaero Tweaker
Winaero Tweaker — бесплатная программа для настройки оформления и поведения Windows 10, позволяющая, помимо прочего, изменить шрифты элементов системы.
- В Winaero Tweaker перейдите к разделу Advanced Appearance Settings, в нем собраны настройки для различных системных элементов. Например, нам требуется изменить шрифт иконок.
- Откройте пункт Icons и нажмите кнопку «Change font» (изменить шрифт).
- Выберите нужный шрифт, его начертание и размер. Особое внимание обратите на то, чтобы в поле «Набор символов» было выбрано «Кириллица».
- Обратите внимание: если вы меняете шрифт для иконок и подписи начали «сокращаться», т.е. не помещаться в поле, выделенное для подписи, вы можете изменить параметры Horizontal spacing и Vertical spacing для того, чтобы устранить это.
- При желании поменяйте шрифты для других элементов (список будет приведен ниже).
- Нажмите кнопку «Apply changes» (применить изменения), а затем — Sign Out Now (чтобы выйти из системы для применения изменений), либо «I’ll do it myself later» (чтобы самостоятельно позже выйти из системы или перезагрузить компьютер, предварительно сохранив нужные данные).
После проделанных действий сделанные вами изменения шрифтов Windows 10 будут применены. При необходимости сбросить сделанные изменения, выберите пункт «Reset Advanced Appearance settings» и нажмите по единственной кнопке в этом окне.
В программе доступны изменения для следующих элементов:
- Icons — иконки.
- Menus — главные меню программ.
- Message Font — шрифт текстов сообщений программ.
- Statusbar Font — шрифт в строке состояния (внизу окна программ).
- System Font — системный шрифт (меняет стандартный шрифт Segoe UI в системе на выбранный вами).
- Window Title Bars — заголовки окон.
Подробнее о программе и о том, где её скачать — в статье Настройка Windows 10 в Winaero Tweaker.
Advanced System Font Changer
Еще одна программа, позволяющая изменить шрифты Windows 10 — Advanced System Font Changer. Действия в ней будут очень похожи:
- Нажмите по названию шрифта напротив одного из пунктов.
- Выберите нужный вам шрифт.
- Повторите при необходимости для других элементов.
- Если необходимо, на вкладке Advanced измените размеры элементов: ширину и высоту подписей значков, высоту меню и заголовка окна, размеры кнопок прокрутки.
- Нажмите кнопку Apply для выхода из системы и применения изменений при повторном входе.
Изменить шрифты можно для следующих элементов:
- Title bar — заголовок окна.
- Menu — пункты меню в программах.
- Message box — шрифт в окнах сообщений.
- Palette title — шрифт заголовков панелей в окнах.
- Tooltip — шрифт панели статуса внизу окон программ.
В дальнейшем, если будет необходимость сбросить сделанные изменения, используйте кнопку Default в окне программы.
Скачать Advanced System Font Changer можно бесплатно с официального сайта разработчика: https://www.wintools.info/index.php/advanced-system-font-changer
Изменение системного шрифта Windows 10 с помощью редактора реестра
При желании, вы можете изменить системный шрифт по умолчанию в Windows 10 с помощью редактора реестра.
- Нажмите клавиши Win+R, введите regedit и нажмите Enter. Откроется редактор реестра.
- Перейдите к разделу реестра
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts
и очистите значение для всех шрифтов Segoe UI кроме Segoe UI Emoji. - Зайдите в раздел
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes
создайте в нем строковый параметр Segoe UI и в качестве значения введите имя шрифта, на которое мы меняем шрифт. Имена шрифтов вы можете посмотреть, открыв папку C:\Windows\Fonts. Название следует вводить точно (с теми же заглавными буквами, что видны в папке). - Закройте редактор реестра и выйдите из системы, а затем снова зайдите.
Название следует вводить точно (с теми же заглавными буквами, что видны в папке).Сделать всё это можно и проще: создайте reg-файл, в котором нужно указать только имя нужного шрифта в последней строке. Содержимое reg файла:
Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts] "Segoe UI (TrueType)"="" "Segoe UI Black (TrueType)"="" "Segoe UI Black Italic (TrueType)"="" "Segoe UI Bold (TrueType)"="" "Segoe UI Bold Italic (TrueType)"="" "Segoe UI Historic (TrueType)"="" "Segoe UI Italic (TrueType)"="" "Segoe UI Light (TrueType)"="" "Segoe UI Light Italic (TrueType)"="" "Segoe UI Semibold (TrueType)"="" "Segoe UI Semibold Italic (TrueType)"="" "Segoe UI Semilight (TrueType)"="" "Segoe UI Semilight Italic (TrueType)"="" [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes] "Segoe UI"="Название Шрифта"
Запустите этот файл, согласитесь с внесением изменения в реестр, а затем выполните выход и вход в Windows 10 для применения изменений системного шрифта.
Видео
Можете предложить свои способы? Буду рад прочесть о них в комментариях.
remontka.pro в Телеграм | Способы подписки
шрифтов — языковая технология SIL
Шрифты с кодировкой Unicodeперечислены более или менее по регионам мира, где они, скорее всего, используются. Специальные производные Unicode, а затем устаревшие кодированные шрифты находятся в конце страницы. (Большинство наших устаревших шрифтов были обновлены до версии Unicode.)
Шрифты Unicode
Глобальные шрифты
Латинские, греческие и кириллические шрифты SIL’s Writing Systems Technology команда создала очень всеобъемлющие шрифты для Наборы символов латинского, кириллического и греческого алфавита: Andika, Charis SIL, Doulos SIL, Galatia SIL и Gentium Plus. | |
Andika Шрифт без засечек на латинице и кириллице, разработанный специально для обучения грамоте и нужд начинающих читателей. Основное внимание уделяется четким буквенным формам, которые нельзя легко спутать друг с другом. | |
Charis SIL Шрифт с засечками на латинице и кириллице, похожий на Bitstream Charter, один из первых шрифтов, разработанных специально для лазерных принтеров. Он имеет пропорциональное расположение и оптимизирован для удобства чтения, а также хорошо работает в неидеальных средах воспроизведения. | |
Doulos SIL Шрифт с засечками, похожий по дизайну на Times/Times New Roman. Он содержит исчерпывающий список глифов, необходимых практически для любой системы письма, основанной на латинице или кириллице, независимо от того, используются ли они для фонетических или орфографических нужд. | |
Gentium Семейство шрифтов с засечками, разработанное для того, чтобы различные этнические группы во всем мире, использующие латиницу, кириллицу и греческий алфавит, могли создавать читаемые высококачественные публикации. | |
Galatia SIL Семейство шрифтов, содержащее большинство символов, определенных в Unicode 3.1 для Latin-1, греческого (за исключением коптского), набора символов Macintosh (US Roman) и 850WE/Latin-1. | |
Устройство SIL Предназначено для предоставления большинства символов, необходимых для воспроизведения текстового аппарата, встречающегося в основных изданиях греческих и еврейских библейских текстов. | |
Doulos SIL Cipher Разработан для представления нотной записи Cipher, используемой в Индонезии и Китае для всех видов музыки. | |
Unicode BMP Fallback Этот шрифт, предназначенный для отладки, содержит глиф для каждого символа базовой многоязычной плоскости (включая область частного использования) Unicode 6.1, каждый глиф состоит из прямоугольника, в котором заключены четыре шестнадцатеричных символа. |
Он поддерживает широкий спектр алфавитов на основе латиницы и кириллицы.
цифры, идентифицирующие скалярное значение Unicode.Шрифты Восточной и Юго-Восточной Азии
Dai Banna Пакет шрифтов для отображения сценария New Tai Lue (Xishuangbanna Dai). Он включает в себя полный набор согласных, гласных, тонов и цифр New Tai Lue, а также знаки препинания и другие полезные символы. | |
Kay Pho Du Шрифт для письма Kayah Li (Karenni) Юго-Восточной Азии. | |
Lisu Bosa Семейство шрифтов для письма Лису (Фрейзер) Юго-Восточной Азии. | |
Mondulkiri Семейство шрифтов для кхмерского письма Камбоджи. | |
Nokyung Другой стиль письма New Tai Lue, который используется языком Xishuangbanna Dai в провинции Юньнань, Китай. | |
Nuosu SIL Шрифт для стандартизированного письма И, используемого большой этнической группой на юго-западе Китая. | |
Padauk Полностью совместимый шрифт Unicode 9, поддерживающий все символы письменности Мьянмы в стандарте, тем самым также обеспечивая поддержку языков меньшинств как в местном, так и в бирманском стиле рендеринга. | |
Payap Lanna Шрифт в традиционном стиле для письменности Тай Тхам из Юго-Восточной Азии. | |
Shimenkan Семейство шрифтов, поддерживающих широкий спектр систем письма, использующих сценарий Miao (Pollard). Включает семейства шрифтов для конкретных языков, такие как Salaowu, Sapushan и Taogu. | |
Tai Heritage Pro Шрифт, разработанный для отражения традиционного рукописного стиля письма тайвьет, который используется народами тайдам, тайданг и тайдон, проживающими на северо-западе Вьетнама и прилегающие районы. |
Шрифты Южной Азии
Annapurna SIL Семейство шрифтов с поддержкой множества различных языков, использующих сценарий деванагари. | |
Мингзат Шрифт для письма, используемого языком лепча в Южной Азии. | |
Namdhinggo Этот шрифт, используемый примерно 400 000 человек в Непале и Индии, был разработан для поддержки грамотности и разработки материалов на языке лимбу. | |
Narnoor Шрифт для письма Gunjala Gondi, который используется в языке Gondi (Adilabad). |
Шрифты Ближнего Востока
Арабские шрифты Команда SIL’s Writing Systems Technology создала ряд шрифтов для использования при написании арабского письма: Alkalami, Awami Nastali q, Харматан, Латиф и Шехерезада Нью. | |
Alkalami Разработан для систем письма на основе арабского языка в регионе Кано в Нигерии и Нигерии. | |
Awami Nastaliq Awami Nastaliq — это арабский шрифт в стиле насталик, поддерживающий широкий спектр языков Юго-Западной Азии, включая, помимо прочего, урду. | |
Ezra SIL Гарнитура, созданная по образцу квадратных букв типографики Biblia Hebraica Stuttgartensia (BHS), красивого тома Ветхого Завета, знакомого библейским евреям. Шрифт поддерживает символы иврита и латиницы-1 из Unicode 5.0. | |
Harmattan Названный в честь пассатов, которые дуют зимой в Западной Африке, он выполнен в арабском стиле Warsh, который подходит для языков Западной Африки. | |
Lateef Расширенный арабский шрифт, названный в честь шаха Абдула Латифа Бхитаи, известного синдского мистика и поэта. Он был разработан SIL International для компьютерных систем, использующих OpenType для рендеринга сложных сценариев. | |
Рувуду Рувуду в манге означает «писать». Этот стиль письма используется людьми манги в Нигере, Западная Африка. | |
Scheherazade New Названный в честь героини классической сказки «Тысяча и одна ночь», шрифт Scheherazade New для арабского письма был разработан SIL International для систем, использующих OpenType или Graphite для рендеринга сложных сценариев. |
Этот шрифт предназначен для поддержки языков меньшинств. Это делает его уникальным среди шрифтов Nastaliq.
Этот шрифт изначально разрабатывался как облегченная или сопутствующая версия Alkalami Regular.Африканские шрифты
Abyssinica SIL Шрифт, основанный на традициях эфиопской каллиграфии. Он поддерживает все эфиопские символы вплоть до новых дополнений Unicode 14.0 включительно. Насколько нам известно, все языки, использующие эфиопское письмо, теперь полностью представлены в Unicode. | |
Акатаб Шрифт Unicode для отображения символов сценария тифинаг на языках тамахак, тамашек и тавалламмат. | |
Sophia Nubian Шрифт без засечек, основной целью которого является обеспечение адекватного представления нубийских языков, использующих набор символов Unicode коптского письма. | |
Tagmukay Высококачественный шрифт для письма шифинаг, поддерживающий тавалламматский диалект тамаджака. |
Специальные производные шрифты Unicode
Мы создали подмножества наших латиницы и кириллических шрифтов для разных регионов мира. Дополнительную информацию см. в разделе Подмножества шрифтов.
Существуют также шрифты, созданные с помощью TypeTuner Web для выбора определенных функций. Дополнительную информацию см. в разделе «Измененные шрифты для специального использования» на связанной странице.
Устаревшие шрифты
Как указано выше, большинство следующих шрифтов были обновлены до версии, совместимой с Unicode. (Предыдущие версии Ezra, Galatia и Namdhinggo можно найти на соответствующих страницах, перечисленных выше.) Если у вас есть данные, написанные с использованием устаревшего шрифта, мы настоятельно рекомендуется преобразовать эти данные в шрифт Unicode.
У нас есть набор инструментов для преобразования кодировки текста специально для этой задачи: TECkit.
- Устаревшие кодовые номера (устаревшие)
- Насталик Навис (Устарело)
- Устройство SIL (устаревшее)
- SIL Encore (устарело)
- SIL IPA (устарело)
- SIL Тай Дам (Устарело)
- SIL Дай Банна (устарело)
- СИЛ Вай
- Загава Берия
Больше не поддерживается
ShiShan Семейство шрифтов Unicode для сценария Miao (Pollard) . |
верх
| Назад к содержанию Установка кириллических клавиатур в Windows XP или Vista Настройка клавиатуры Ввод кириллицы на чужих компьютерах Кириллица в компьютерных классах GW Кириллица в интернет-браузерах Дополнительный вопросы (системные шрифты Windows) Вставка ударений в кириллица | ИНТЕРНЕТ-ЭЛЕКТРОННАЯ ПОЧТА. Большинство систем электронной почты достаточно умны, чтобы понять, как отображать кириллицу правильно, без дополнительных уговоров. Скрытая линия код в заголовке сообщения электронной почты обычно сообщает программе электронной почты или браузеру, как Кириллица кодируется. Иногда вы можете восстановить убитый русский язык, настроив, как ваша электронная почта программа выводит русский… Если вы видите много европейских гласных с ударением, в основном строчные , нажмите Вид=>Кодировка=>Кириллица — Windows . Это вернет вас в папку «Входящие» вашего почтового ящика. (Если это не так, нажмите View=>Encoding=>Cyrillic — Снова Windows .) Теперь снова нажмите на сообщение. Это должен выйти на кириллице. Если вы видите в основном в верхнем регистре Европейские ударные гласные, хит Вид=>Кодировка=>Кириллица КОИ-Р . Это вернет вас в папку «Входящие» вашего почтового ящика. (Если оно нет, нажмите View=>Encoding=>Cyrillic КОИ-Р снова.) Теперь снова нажмите на сообщение. Он должен выйти в Кириллица.
«МОЕ УЧРЕЖДЕНИЕ НЕ ПОДДЕРЖИВАЕТ КИРИЛЛИЧНУЮ ЭЛЕКТРОННУЮ ПОЧТУ!» Да, такое бывает.
Предположим на мгновение, что вы Someone@state_university.edu .
Готово. С этого момента вы используете Gmail с поддержкой кириллицы. Но твоя личность по-прежнему кто-то@state_university.edu .
НО Я ВСЕ ЕЩЕ ВИЖУ КИРИЛЛИЦУ КАК ????? ???? ?? ?????? ! Если вместо букв кириллицы вы видите вопросительные знаки или квадратики, кто-то пытается отправить вам русский язык со старой системы электронной почты (например, Wisemail), которая не поддерживает кириллицу. |
Все популярные почтовые веб-программы (Gmail, Hotmail, MSN-Mail, Yahoo) по умолчанию поддерживают кириллицу. Тем не менее, иногда вам нужно настроить параметры. Русская электронная почта обычно работает лучше всего, когда вы отправляете в формате UTF-8 и Formatted Mail (также известном как «расширенный формат», «HTML»; другими словами, NOT «обычный текст») Перейдите на экран справки вашей почты и найдите UTF-8 . Убедитесь, что все, особенно исходящая почта, настроено на это. Это никоим образом не повлияет на электронную почту, отправляемую вам на других иностранных языках.
Увы! Многие GroupWise не могут надежно отправлять кириллицу.
(Точно так же вы не можете отправлять кириллическую почту людям в GroupWise с какой-либо гарантией того, что они смогут ее прочитать.) Русское , скорее всего, выйдет в виде вопросительных знаков или маленьких коробочек. Сдаться. Это не может быть исправлено. (Но см. «Мое учреждение не поддерживает кириллицу в электронной почте!» ниже.)
Кириллица отправлена в Rich
Часто выживает формат из недружественной к кириллице системы. Обычный текст Кириллица
иногда убивают.
Было время, когда даже известная исследовательская организация, связанная с Россией, не могла читать электронные письма, присланные российскими коллегами. Но всегда есть решение — способ отправлять и получать почту с помощью адрес электронной почты вашего учреждения . Приведенное ниже решение дано для Gmail, который является оператором электронной почты по умолчанию для Университета Джорджа Вашингтона. Однако аналогичное решение может работать и для других систем электронной почты, работающих в Интернете, таких как почта Yahoo или MSN.
Перейдите в свою старую учетную запись Someone@state_university.edu . Настройте правила переадресации, чтобы вся почта, приходящая на этот адрес, теперь направлялась на 
edu , а не новую учетную запись Gmail. Мы исправим это в следующих нескольких шагах.
edu . (Это легко изменить.)