После такого количества кода вы действительно понимаете шрифты?

Автор этой статьи @ Qiangu №1.

предисловие

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

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

Шрифт действительно просто "Системный дефолт, без объяснений«Неужели все так просто? Продукт обманут? Или разработка поверхностна? Кто может победить в игре между ними двумя? Изучите эту статью, и вы сможете победить.

Классификация шрифтов

Общие шрифты можно разделить на две категории:с засечками, без засечек.

1. с засечками (с засечками): В начале и в конце штрихов символов есть дополнительные украшения, и толщина штрихов будет разной.

Общие засечки:

Тип песни, курсив
Times New Roman

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

Обычные шрифты без засечек:

черное тело
Китайский шрифт по умолчанию для платформы Windows: Microsoft Yahei (Microsoft Yahei)
Английский шрифт по умолчанию для платформы Windows: Arial
Китайский шрифт по умолчанию для платформы Mac и iOS: PingFang SC
Английский шрифт по умолчанию для платформы Mac и iOS: San Francisco
Шрифт по умолчанию для платформы Android: Droid Sans

Пополнить:

Засечки в настоящее время используются редко, а знакомый вам «Курьер» в основном встречается только в бумажных изданиях. а такжеБез засечек больше соответствует современной эстетике..

Итак, теплое напоминание для вас:Не используйте династию Сун при создании PPT. Если вы не знаете, какой шрифт использовать, просто используйте системный шрифт по умолчанию: Microsoft Yahei для платформы Win, шрифт Pingfang для платформы Mac.

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

семейство шрифтов

Под семейством шрифтов в CSS можно понимать определенный тип шрифта. Общие семейства шрифтов можно разделить на пять категорий:

с засечками: с засечками.
без засечек: без засечек.
моноширинный: моноширинный шрифт. Каждая буква занимает одинаковую ширину. Максимально используйте моноширинные шрифты при написании кода.
recsive: рукописный шрифт. Например, почерк Xu Jinglei.
фэнтези: фэнтезийный шрифт. Например, некоторые художественные слова.

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

Ссылка на ссылку:шрифт с засечками, без засечек, моноширинный шрифт, курсив и фантазия

Резервный механизм с несколькими шрифтами

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

.div1{
    font-family: "PingFang SC", "Microsoft Yahei", monospace;
}

Значение приведенного выше кода CSS: пусть текст в указанном элементе метки использует шрифт Pingfang на платформе Mac и iOS и использует шрифт Microsoft Yahei на платформе Win.Если ни один из этих двух шрифтов недоступен, просто найдите моноширинный шрифт. для рендеринга.

Уведомление:

(1) При написании кода CSS семейству шрифтов не нужны кавычки.

(2) Некоторые пользователи Mac будут устанавливать программное обеспечение, такое как Office.После установки этого программного обеспечения система, кстати, установит шрифт Microsoft Yahei. На этом этапе при написании кода CSS, если он написан как"Microsoft Yahei", "PingFang SC"Этот порядок может привести к тому, что некоторые пользователи Mac будут использовать Microsoft Yahei для отображения шрифтов. У вас хватит духу отказаться от такого красивого шрифта Pingfang?

font-weight: полужирный атрибут шрифта

Атрибут полужирного шрифта font-weight — самый запутанный атрибут для студентов, работающих с интерфейсом. Когда вы приносите готовую веб-страницу продакт-менеджеру для принятия, как только веб-страница открывается, первое, на что обращает внимание продакт-менеджер, — это выделение шрифтов жирным шрифтом, верите вы или нет? Следующие слова — мантры продакт-менеджеров, и они, должно быть, уже вызвали у вас слуховые галлюцинации:

«Почему этот шрифт не жирный?»
«Этот шрифт слишком толстый?»
«Почему вес текста несовместим на телефонах iPhone и Android?»

Чтобы разобраться в этих сомнениях, давайте сначалаfont-weightКакие значения свойств существуют.

свойство font-weight: при настройке шрифта значение свойства может быть заполнено числами, например, от 100 до 900, или заполненоnormal,boldтакие слова.normalэквивалентно 400,boldСтоимость эквивалентна 700. следующим образом:

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-weight: normal; // 相当于 400
font-weight: bold;   // 相当于 700

Вот ключевой вопрос. Многие обнаружат, что в браузере на платформе Windows, независимо от того, установлен ли вес шрифта на 300, 400 или 500, толщина текста не меняется. много передач?

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

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

Возьмем, к примеру, «Microsoft Yahei», он поддерживает только две толщины 400 и 700, поэтому, когда вы пишете 500 в коде, он также будет считаться 400. Но шрифт «Pingfang» на Mac поддерживает различные веса от 100 до 900.

Другой пример: некоторое время назад шрифты Pratt & Whitney с открытым исходным кодом от Alibaba также поддерживали несколько толщин:

Эффект полужирного шрифта по умолчанию на основных платформах

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

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

1. Эффект полужирного шрифта по умолчанию для платформы Mac: (шрифт Pingfang)

2. Эффект полужирного шрифта по умолчанию для платформы Windows.: (шрифт Microsoft Yahei)

3. Эффект полужирного шрифта по умолчанию для платформы iOS.: (шрифт Pingfang)

4. Эффект полужирного шрифта по умолчанию для платформы Android (Huawei P30 Pro): (шрифт Droid Sans)

Суммировать: (эффект полужирного шрифта по умолчанию на основных платформах)

Шрифт "Pingfang" для платформы Mac и iOS: 500 и 600, эффект полужирного шрифта разный;>=600Эффект жирности тот же.
Шрифт "Microsoft Yahei" для платформы Windows: только>=600будет выделен жирным шрифтом, и эффект выделения будет таким же.
Шрифт Droid Sans только для платформы Android>=700будет выделен жирным шрифтом, и эффект выделения будет таким же.

Большинство шрифтов не бесплатны

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

Конечно, есть бесплатные шрифты, такие какСыюань Черное Тело(Шрифт с открытым исходным кодом, совместно запущенный Adobe и Google в июле 2014 г.), Alibaba Pratt & Whitney и т. д. Но эти бесплатные шрифты в основном нами не используются.

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

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

см. вышеFZLTZCHK, не паникуйте, немедленно зайдите в Google, чтобы проверить и обнаружить, что полное название этого шрифта方正兰亭семейство шрифтов. Ну почти наверняка этот шрифт тоже заряжен.

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

Какие шрифты используются на веб-страницах

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

Если вы действительно хотите использовать специальные шрифты, есть только несколько вариантов:

Используйте бесплатные шрифты с открытым исходным кодом (такие как Siyuan Hei, Alibaba Puhui и т. д.). Но такого типа шрифта очень мало, и он не очень красивый. В веб-разработке его почти никто не использует.
Коммерческие шрифты приобретаются отдельно и лицензируются.
Моя собственная компания разрабатывает набор шрифтов для моего собственного использования.

Например, моя компания JD самостоятельно разработала набор коммерческих шрифтов.JDZH(Только компания JD может использовать его, другие компании не могут использовать его), поддерживает три толщины. следующим образом:

/**
 * JD正黑体，提供三种字重，请严格按设计稿选择字体
 */
 @font-face {
    font-family: 'JDZH-Light';
    src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Regular';
    src: url('xxx.com/data/ppms/others/JDZH_Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Bold';
    src: url('xxx.com/data/ppms/others/JDZH_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZhengHT-EN-Bold';
    src: url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf') format('truetype');
}

чтобы использовать этоJDZHШрифты, когда компания JD фактически разрабатывает веб-страницы, делают это:

Шаг 1: Вставьте приведенный выше код библиотеки шрифтов в общедоступный файл CSS. Таким образом, при загрузке страницы пользовательский терминал загрузит библиотеку шрифтов.
Шаг 2: В бизнес-коде для целевого стиля используйте его напрямуюfont-family: 'JDZH-Regular';Этот код вступит в силу.

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

Последний абзац

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

В 2005 году основатель Apple Стив Джобс в своей речи на выпускном в Стэнфордском университете сказал следующее:

В то время я никак не ожидал, что то, чему я научился, пригодится мне в жизни.

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

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

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