Шрифты для сайта css: Шрифты для сайта в CSS

Шрифты веб-сайта легко могут занять значительную часть общего размера пакета, который браузеры должны загрузить, прежде чем смогут отобразить страницу в ее окончательном виде и форме. Кроме того, веб-дизайнерам нужно беспокоиться о таких как печально известных вещах, как FOUT (Flash of Unstyled Text, или появление неоформленного текста). Однако есть вероятность, что благодаря свойству font-display эта проблем была частично решена.

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

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

Таким образом, уловка заключается в том, чтобы предоставить имена этих системных шрифтов по умолчанию в качестве значения свойства font-family для элемента, который должен использовать системный шрифт. Браузер будет использовать первый шрифт, который он сможет найти в текущей системе. Имейте в виду, что текст будет выглядеть по-разному – в зависимости от того, в какой системе он читается. Однако это не плохо, поскольку при этом текст будет выглядеть естественно в контексте стиля ОС, в которой он был открыт.

Системный стек шрифтов Sans Serif

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

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

Читайте также: Использование переменных шрифтов CSS в сети

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

• -apple-system и BlinkMacSystemFont: ключевые слова для обозначения системного шрифта на устройствах Apple (обычно это San Francisco или Helvetica Neue, в зависимости от версии операционной системы). В некоторых новых браузерах для работы с этими двумя ключевыми словами теперь можно использовать ключевое слово system-ui.
• Segoe UI: используется в системах Windows.
• Roboto: системный шрифт для устройств Android.
• Oxygen-Sans: шрифт для систем Linux, использующих KDE.
• Ubuntu: шрифт для Ubuntu Linux.
• Cantarell: системы Linux на Gnome (кроме Ubuntu).
• Helvetica Neue: общий резервный шрифт, доступный во многих системах (особенно в Apple). Он определяется на случай, если все предыдущие шрифты не получается загрузить.
• sans-serif: если все предыдущие шрифты не загружаются, страница может вернуться к sans-serif, шрифту браузера по умолчанию. Это не самый приятный вариант, поэтому он используется в последнюю очередь.

Естественно, существует множество различных вариантов стеков системных шрифтов. Например, вот стек, который использует GitHub.

Стеки моноширинных шрифтов

Хотя для шрифтов с засечками не существует системного стека, такой стек есть для моноширинных шрифтов. Он может быть действительно полезным для оформления фрагментов кода и т.п. Вот шрифт, который использует Bootstrap v4 (а GitHub использует очень похожую версию):

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono",
               "Courier New", monospace;
}

Системные шрифты и @font-face

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

Читайте также: Определение пользовательских шрифтов в CSS с помощью @font-face и font-display

Использование вариантов оформления для брендирования сайтов SharePoint

• Статья
• 12/13/2022
• Чтение занимает 8 мин

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

Важно!

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

Чтобы применить вариант оформления на сайте SharePoint, выберите

Механизм тем SharePoint

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

В SharePoint и SharePoint Online тема — это связанный набор XML-файлов определений, файл изображения и соответствующая эталонная страница, которые можно использовать для применения настраиваемого стиля CSS к сайту.

Следующие XML-файлы указывают слоты цветов и шрифтов, определяющие конкретные цвета и шрифты, которые применяются к стилям:

• SPCOLOR
• SPFONT

Можно создавать собственные файлы цветов и шрифтов в любом текстовом редакторе.

В таблице ниже перечислены элементы варианта оформления.

Таблица 1. Элементы составного вида

Пользователи могут выбирать варианты оформления с помощью Мастера изменения внешнего вида (

Цветовые палитры

Механизм тем хранит цвета в цветовых палитрах, определенных файлом SPCOLOR, как показано на рисунке ниже.

Цветовые палитры хранятся в коллекции тем корневого сайта. Цветовая палитра — это редактируемый XML-файл, состоящий из определений цветовой палитры и цветовых слотов.

Метаданные цветовой палитры (<s:colorPalette>) определяют следующее:

• Три слота предварительного просмотра, которые определяют, какие цветовые слоты использовать для предварительных просмотров вариантов оформления.
• Свойство IsInverted, позволяющее конструктору палитры указать, является ли тема инвертированной (темный фон со светлым текстом).
• Пространство имен XML, связанное с темой.

Цветовые слоты определяются двумя атрибутами: именем цвета и значением&mdaash; которые определяют имя цвета и его RGB-значение. Цветовые слоты имеют понятные имена, например BodyText (ОсновнойТекст) или SiteTitle (ЗаголовокСайта), помогающие определить, какой области страницы SharePoint соответствует каждый слот.

<s:color name="BodyText" value="444444" />

Вторая строка SPCOLOR-файла определяет пространство имен XML, слоты предварительного просмотра и инвертированы ли цвета (светлый передний план на темном фоне вместо темного переднего плана на светлом фоне).

SPCOLOR-файл содержит 89 цветовых слотов. Цветовые слоты можно использовать для определения разнообразных аспектов цвета, включая прозрачность, с помощью значений из 8 цифр в шестнадцатеричном формате. Например, если зеленому цвету соответствует значение RRGGBB 00FF00, зеленому цвету с 70% прозрачностью соответствует значение AARRGGBB 7F00FF00. Если в SharePoint используется слот, который не определен, любой стиль CSS, ссылающийся на него, не изменяет цвет. Если на определенный слот отсутствует ссылка в CSS, цвет не отображается в пользовательском интерфейсе.

Вы можете редактировать SPCOLOR-файл в Блокноте. Его нельзя редактировать в PowerPoint.

Инструмент работы с цветовой палитрой

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

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

Инструмент работы с цветовой палитрой

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

Схемы шрифтов

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

Схемы шрифтов определены в SPFONT-файле, хранящемся в коллекции тем. SPFONT-файл включает следующие слоты шрифтов, определяющие имя, шрифт и значения начертания для варианта оформления:

• Title
• Navigation
• Small-heading
• Heading
• Large-heading
• Body
• Large-body

Шрифты затем объединяются по типу начертания (например, латиница, арабский, кириллица). Поддержка веб-шрифтов включена в четырех типах файлов:

• Внедряемые шрифты Open Type (EOT)
• Файл Web Open Font Format (WOFF)
• Шрифт TrueType (TTF)
• Масштабируемая векторная графика (SVG)

Схема шрифта определяет большое и маленькое изображение предварительного просмотра. Они необходимы только для веб-шрифтов.

Примечание.

Вы можете редактировать SPFONT-файл в Блокноте. Его нельзя редактировать в PowerPoint.

Ниже приведен пример SPFONT-файла.

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"
  xmlns:s=http://schemas.microsoft.com/sharepoint/>
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Georgia"/>
            <s:font script="Arab" typeface="Calibri" />
            <s:font script="Deva" typeface="Mangal" />
            . . . 
        </s:fontSlot>
    <s:fontSlot name="navigation">
        <s:latin typeface="Georgia"/>
        <s:font script="Arab" typeface="Calibri" />
        <s:font script="Deva" typeface="Mangal" />
        . . . 
        </s:fontSlot>
    </s:fontSlots>
</s:fontScheme>

Макет сайта: эталонные страницы и соответствующие файлы предварительного просмотра

Механизм тем определяет макет сайта варианта оформления на основе эталонной страницы MASTER и соответствующего файла PREVIEW. Например, если для варианта оформления определена эталонная страница seattle.master, эта эталонная страница определяет макет сайта.

Макет сайта извлекается из коллекции любых эталонных страниц, содержащих сопутствующие PREVIEW-файлы. PREVIEW-файл необходим, чтобы эталонная страница отображалась в виде варианта в пользовательском интерфейсе Изменение оформления (Параметры сайта>Внешний вид и функции>Изменение оформления).

Чтобы сделать эталонную страницу доступной в меню Макет сайта, создайте PREVIEW-файл, соответствующий странице MASTER. PREVIEW-файл отображает эскизы для вариантов оформления и раздел предварительного просмотра справа от вариантов Изменение оформления на странице designbuilder.aspx.

Фоновое изображение

Вы можете изменить фоновое изображение варианта оформления, выбрав параметр Изменить. Откроется диалоговое окно добавления, которое можно использовать для добавления файла изображения. Также можно перетащить свое изображение в область предварительного просмотра фона.

Создание настраиваемых тем

Чтобы создать настраиваемую тему:

1. Откройте Параметры сайта и в разделе «Коллекции веб-дизайнера» выберите Темы>15. Отобразится список файлов SPCOLOR и SPFONT, как показано здесь.

2. Скачайте копию одного из файлов SPCOLOR (например, Palette001.spcolor) и откройте ее в текстовом редакторе.

3. Измените скопированный SPCOLOR-файл, чтобы отобразить собственные инструкции оформления. Например, если вы используете черный шрифт для основного текста, отредактируйте файл, изменив строку <s:color name="BodyText" value="444444" /> на <s:color name="BodyText" value="000000" />.

4. Для каждого элемента HTML добавьте цвет.

5. После завершения отправьте файл SPCOLOR в папку Параметры сайта>Темы>15.

   Примечание.

   Сохраните файл под новым именем (например, custom_palette1.spcolor).

   В таблице ниже сопоставлены цвета и элементы страницы с их кодами в SPCOLOR-файле. Это подмножество сопоставлений, доступных в SPCOLOR-файле.

   Табл. 2. Сопоставление цветов и элементов страницы с SPCOLOR-файлом

   Элемент	Цвет	Код
   Основной текст	Черный	<s:color name="BodyText" value="000000" />
   Фон глобальной структуры навигации	Синий	<s:color name="HeaderBackground" value="018dff" />
   Текст глобальной структуры навигации	Белый	<s:color name="HeaderNavigationText" value="ffffff" />
   Фон текущей структуры навигации	Красный	<s:color name="NavigationHoverBackground" value="e51400" />
   Текст текущей структуры навигации	Белый	<s:color name="Navigation" value="ffffff" />
   Заголовок	Белый	<s:color name="SiteTitle" value="FFFFFF" />
   Фон нижнего колонтитула	Черный	<s:color name="FooterBackground" value="000000" />

6. Чтобы настроить SPFONT-файл, скачайте копию SPFONT-файла и откройте ее в текстовом редакторе. Обратите внимание, что SPFONT-файл немного отличается от SPCOLOR-файла, но оба они имеют схожую структуру.

7. Измените каждый раздел <s:fontSlot />, чтобы настроить шрифт, применяемый SharePoint к определенному слоту шрифтов на странице. Например, обратите внимание на первую запись <s:fontSlot name="title">. Эта запись указывает, какой шрифт использует SharePoint для стиля заголовка страницы. В этом разделе также указано, какой шрифт используется для других языков.

   Примечание.

   Вы можете добавить пользовательские шрифты в SharePoint и сопоставить каждую запись с пользовательским файлом EOT, WOFF, TTF или SVG.

8. Отправьте файл в папку Параметры сайта>Темы>15.

   Примечание.

   Сохраните файл под новым именем (например, custom_font.spfont).

   В следующей таблице сопоставляются элементы страницы с шрифтами, определенными в файле SPFONT.

   Табл. 3. Сопоставление элементов страницы со шрифтами

   Элемент	Шрифт	Код
   Заголовок	Open Sans	<s:cs typeface="Open Sans" />
   Навигация	Roboto	<s:cs typeface="Roboto" />
   Верхние колонтитулы	Trajan Pro	<s:cs typeface="Trajan Pro" />
   Текст	Open Sans	<s:cs typeface="Open Sans" />

   Может потребоваться проверка доступности некоторых пользовательских шрифтов в браузерах пользователей. Например, если заголовки ссылаются на шрифт Trajan Pro, что редко встречается на компьютерах большинства пользователей, добавьте следующие объявления шрифтов в начало <объявления s:fontSlot> . Это обеспечит правильное отображение шрифта.

   <s:latin typeface="Trajan Pro" 
       eotsrc="/SiteAssets/Trajan Pro. eot" 
       woffsrc="/SiteAssets/Trajan Pro.woff" 
       ttfsrc="/SiteAssets/Trajan Pro.ttf" 
       svgsrc="/SiteAssets/Trajan Pro.svg"  />
   

Добавление настраиваемой темы в SharePoint

После выполнения настроек эталонной страницы, файлов SPCOLOR и SPFONT, добавьте их в каталог «Варианты оформления», чтобы SharePoint получил к ним доступ.

1. Откройте Параметры сайта и в разделе Коллекции веб-дизайнера выберите Варианты оформления.

2. Щелкните ссылку Создать элемент в левом верхнем углу. Откроется окно, как показано ниже.

3. Добавьте заголовок и имя для варианта оформления.

4. Заполните оставшиеся поля:

   • В поле URL-адрес эталонной страницы добавьте URL-адрес эталонной страницы, которую должна использовать тема.

   • В поле URL-адрес темы добавьте URL-адрес SPCOLOR-файла.

   • В поле URL-адрес изображения укажите URL-адрес изображения, которое нужно использовать в качестве фона. Это необязательно, если в вашем оформлении не требуется фоновое изображение.

   • В поле URL-адрес схемы шрифтов добавьте URL-адрес SPFONT-файла.

   • В поле Порядок отображения укажите порядок, в котором должен отображаться вариант оформления.

5. Нажмите кнопку Сохранить. Запись темы появится в списке Варианты оформления.

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

На рисунке ниже показан пример раздела Изменение оформления на странице Параметры сайта.

Действия механизма тем при применении пользователем варианта оформления

Когда пользователь применяет вариант оформления, SharePoint копирует, преобразует и сохраняет CSS в базе данных контента. Также изменяется цвет изображений и они сохраняются в базе данных контента. В процессе применения темы к сайту механизм тем извлекает значения цветов и шрифтов из указанной цветовой палитры и шрифтовой схемы, находящихся в коллекции тем корневого сайта. Чтобы применить страницу MASTER и файл эталонной страницы PREVIEW (макет сайта), механизм тем извлекает эталонные страницы из коллекции эталонных страниц с соответствующим файлом PREVIEW.

Когда применяется вариант оформления, механизм сопоставляет параметры, заданные конкретными комментариями CSS, которые определены механизмом тем. В процессе механизм тем сохраняет фоновое изображение в активы сайта, масштабирует и сжимает изображения JPG и BMP, а также ограничивает размер изображений GIF и PNG.

Когда к сайту SharePoint применяется вариант оформления, SharePoint находит и заменяет маркеры комментариев CSS, внедряя значение, извлеченное из варианта оформления в следующей строке CSS-файла после маркера. Это новое значение применяется к сайту SharePoint.

В таблице ниже перечислены маркеры комментариев CSS.

Табл. 4. Маркеры комментариев CSS

См. также

• Решения для создания фирменного стиля и настройки страниц на сайтах SharePoint
• Подготовка сайтов и применение к ним фирменных стилей для SharePoint

Fonts.

Все готово, перейдите в раздел «Управление веб-шрифтами» для создания моего проекта проект.

2. Добавить домены [старые клиенты]

Просто укажите URL-адреса доменов, на которые вы хотите обслуживать свои шрифты; это так просто.

3. Добавление и редактирование селекторов CSS

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

4. Опубликовать

Теперь вы готовы к публикации! Выберите предпочтительный метод публикации и запустите свой проект.

A. Поиск шрифтов

Используйте панель поиска на сайте Fonts.com для поиска шрифтов по названию, дизайнеру или производителю. Вы также можете искать шрифты по ключевому слову или теме.

B. Просмотр шрифтов

В разделе «Обзор шрифтов» на сайте Fonts.com вы можете дополнительно искать недавно выпущенные, избранные и самые продаваемые шрифты. Вы также можете выбрать поиск по классификации шрифтов.

C. Добавление шрифтов в ваш проект

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

Просто укажите URL-адреса доменов, на которые вы хотите обслуживать свои шрифты; это так просто. Звездочку, за которой следует точка (*.), можно использовать в качестве подстановочного знака для добавления нескольких поддоменов в ваш проект веб-шрифтов.

Например, указание «*.example.com» в качестве домена позволит вам использовать службу веб-шрифтов Fonts.com на поддоменах, таких как first.example.com, second.example.com, а также Third.example. ком.

A. Добавить селекторы CSS

Сначала определите селекторы CSS своего веб-сайта и добавьте их каждый по имени на панели «Селекторы». Это позволит стилизованным элементам вашего веб-сайта назначать определенные веб-шрифты.

Селекторы находятся в CSS вашего сайта. Вот некоторые из наиболее популярных селекторов CSS: h2, h3, div, body, bodycopy, header и footer . Если вы предпочитаете указывать свои шрифты непосредственно в своем собственном CSS, вы также можете сделать это, просто пропустив вперед к параметрам публикации.

B. Назначение шрифтов

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

C. CSS Sucker

Не знаете, какие селекторы используются на вашем сайте? Вы также можете использовать наш инструмент CSS Sucker для извлечения списка селекторов CSS, которые используются на вашем веб-сайте.

A. JavaScript [старые клиенты]

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

B. CSS [устаревшие клиенты]

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

C. Самостоятельный хостинг

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

Как выбрать и установить шрифты Google на свой сайт HTML CSS

Итак, пришло время перейти от старого скучного Arial к Playfair и Roboto. Вы можете быть не так взволнованы, как я, но это больно, этот класс. Все еще долгое время с настоящими базовыми шрифтами, теперь мы можем делать красивые шрифты. Мы собираемся использовать что-то под названием Google Fonts. Я собираюсь показать вам, как их выбирать, как встраивать и запускать код, а также как выбирать шрифты и как их стилизовать, где черпать вдохновение. Ладно, хватит болтовни, больше дела. Увидимся на видео.

Чтобы начать работу с Google Fonts, прежде всего, почему мы используем Google Fonts? Итак, fonts.google.com, есть конкуренты, Font Squirrel, 1001 Fonts, DaFont, ему есть конкуренты. Все, что вам нужно сделать, это убедиться, что это шрифт, размещенный для использования на веб-сайте. Он отличается от шрифтов, которые вы загружаете для использования на своем компьютере. Если вы пойдете на Dafont и скачаете бесплатный шрифт, вы не сможете использовать его на своем веб-сайте. Это должно быть что-то вроде жизни в Интернете, и хорошим местом для их поиска является что-то вроде fonts.google.com. Они бесплатны, и я расскажу, как выбрать стили, шрифт. сопряжение и некоторые другие вещи после того, как мы разберем основы того, как поместить это в кодировку, потому что это может быть все, для чего вы здесь.

Итак, я собираюсь использовать пару шрифтов. Итак, здесь, в поиске, я собираюсь ввести «Roboto», я не буду, это прямо здесь. Возможно, вам придется ввести его и нажать «+», и он будет добавлен, здесь находится небольшой селектор шрифтов, моя небольшая группа шрифтов, которые я собираюсь использовать на своем веб-сайте. Другой, который я хочу, находится здесь, это будет Play Fair, это два слова? Нет, я должен играть правильно. Мозг работает, так что это Playfair, одним словом. Вы можете видеть там, я использую только дисплей Playfair, я собираюсь добавить его. Прохладный. Так что это добавлено сюда, это мало что дает. Давайте нажмем эту маленькую кнопку, чтобы открыть его. И то, что мы хотим сделать сейчас, это то, что мы хотим настроить.

Итак, на данный момент, скажем, Playfair, вот он, и Roboto, на данный момент собирается загрузить только одну версию этого шрифта. Теперь вам нужно решить, основываясь на вашем дизайне, и это действительно важно, когда вы используете программу для дизайна своего веб-сайта, например, XD, или Sketch, или Illustrator, или Photoshop, используя множество разных шрифтов. будет немного болезненно, когда ваш сайт должен загрузиться. Так что на данный момент у меня есть только один размер, это обычный размер, который я использовал в своем дизайне. Внизу, где дело доходит до основной копии, я использовал Roboto, я использовал облегченную версию, и я не использовал ничего другого, но вы, вероятно, будете в порядке, вам также может понадобиться использовать Bold , может быть, курсивом, и единственная проблема с этим, или о чем нужно беспокоиться, скажем, мне нужна версия Bold и Regular Italic.

Видишь ли, вот эта штука, она говорит: «Эй, ваш веб-сайт будет загружаться умеренно», поэтому вы оранжевые, а здесь внизу вы говорите: «На самом деле я хочу обычную, а У меня есть Light, и я также хочу Medium, и я использовал Bold, вы можете видеть здесь, плохо. Он стал красным и сказал: «Ваш веб-сайт будет загружаться вечно». И почему это плохо? Это плохо для пользователя в целом, поэтому человек переходит на ваш сайт, и загрузка занимает целую вечность из-за шрифтов, и это, вероятно, не будет стоить того, или, по крайней мере, то, о чем вам нужно помнить. . 

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

Итак, мы настроили его, мы хотим его, теперь нам нужно добавить его на наш сайт, Крутая вещь, которую вы можете сделать, пока мы здесь, нет, покроем это немного, давайте добавим сайт. Нажмите «Вставить». Так же, как мы сделали, когда мы импортировали эту карту Google, это очень просто, они делают всю работу за вас. Вы берете этот фрагмент и копируете его. Я использую «Command C» на своем Mac, «Ctrl C» на ПК, и он говорит: «Положи это себе в голову». Я могу это сделать, поэтому давайте скопируем его сюда, в Visual Studio Code, но вот наш тег Head, открывается, закрывается. Куда это пойдет? Я собираюсь вставить его в нижней части там. Они не сказали, куда его вставить, я просто собираюсь вставить его туда.

Вы можете видеть, где он добавлен, он сказал: «Эй, когда эта страница загрузится, иди и купи шрифты». Эти шрифты, я хочу получить Roboto и Playfair, и веса, я хочу, чтобы вы скачали этот. Это должно быть для них обоих. Итак, о, и другой называется Display. Таким образом, вы можете изменить их, скажем, позже вы скажете: «На самом деле, я не хочу использовать это, я хочу использовать 500», который является более тяжелым шрифтом, вы заметите, что они не используют , например, они говорят «Жирный», но в коде он обозначается как 700. Так что, если мне сейчас нужно 700, а не 300, я могу просто добавить его туда, а не возвращаться в Google и пытаться настроить его снова.

Итак, он добавлен наполовину, поэтому вы добавляете его в HTML, а затем добавляете туда, где хотите, чтобы он применялся. Итак, в нашем случае у нас есть копия моего тела, я бы хотел, чтобы все это было Робото. На данный момент я настроил его на Arial, так что он войдет сюда и возьмет Embed, и мы найдем… так, это в голове, это в CSS. И я возьму Roboto, скопирую все это и просто заменю все это. Хороший. Сохраните сейчас, и, надеюсь, в моем браузере теперь есть Roboto, и вы скажете: «Не сильно отличается от Arial». Он такой хороший, Роберто такой, вроде самый общий. Open Sans, Source Sans и Roboto — это основная копия для онлайн. Это наиболее часто используемый.

Давайте добавим немного больше — что-то более конкретное или, по крайней мере, немного визуально отличающееся, как и этот Playfair. Нажмите «Копировать», и я добавлю его на свой сайт. Я собираюсь сделать свой h2. Так вот, я собираюсь сделать, вставить, сохранить, просмотреть. Посмотри на это, Плейфер. С маржей все перепуталось, мы скоро поиграем с этим, но вот как это реализовать. Закинуть в голову, а потом добавить в CSS. Теперь я сказал, что покажу вам, как я выбираю шрифты, это немного больше похоже на просто творчество, например, как я иду и выбираю свои шрифты.

Так что здесь вы не узнаете ничего технического, так что вы можете перейти к следующему видео, если вы спешите, но если нет, подождите, давайте поговорим о. .. потому что я занимаюсь этим процессом проектирования, так что Я использую Adobe XD, вы можете использовать что-то вроде, я не знаю, PowerPoint, если у вас есть навыки, или Photoshop для веб-дизайна, Illustrator для веб-дизайна. У меня есть курсы по всем этим, если хотите, посмотрите их, но допустим, что вы используете XD. Вы не собираетесь использовать Roboto или Playfair на своем компьютере, чтобы начать использовать их, но вы хотите смоделировать их на своем фактическом дизайне, прежде чем переходить и реализовывать их на веб-сайте.

Итак, что вы делаете, в том же месте, в Google Fonts, вы получаете тот же самый бит, вы говорите: «Хорошо, я хочу загрузить все это», и вы добавляете их в группу, например мы так и сделали, и наверху здесь, наверху этой маленькой, вот эта маленькая стрелочка, это то, что я собирался показать вам раньше, но мы разошлись. Нажмите на это. Самое классное в этом то, что эти шрифты будут загружены на ваш компьютер, и вы можете дважды щелкнуть их, открыть, и они будут установлены, и их можно использовать бесплатно. Они очень крутые, это хороший способ получить бесплатные шрифты.

Что вы можете сделать, если загружаете их для своего компьютера, так это зайти в Customize, просмотреть и просто отметить их все. Самое классное в них то, что вы можете использовать их как для графического дизайна, так и для веб-дизайна. Так что да, просто отличный ресурс для шрифтов. Итак, вы знаете, как их скачать, давайте поговорим о том, как их подобрать, и какие, как подобрать стили. Итак, мы собираемся вернуться к Google Fonts. Я просто нажимаю на логотип здесь. У самого Google есть несколько приятных функций, тогда как, скажем, мы делаем какие-то заголовки, я не хочу находить какие-то шрифты для заголовков. Отображение — это общий термин для немного более креативных заголовков, ну, знаете, шрифтов. Так что ты можешь пройти через это — о, Эйприл, он мне нравится. — и найти то, что будет работать на вас.

То же самое с основной копией, вы будете либо с засечками, либо без засечек. Разница в том, что шрифт с засечками похож на Times New Roman, у него есть все дополнительные маленькие ножки на концах, они называются засечками, а шрифт без засечек не имеет ножек. Так что это своего рода более распространенный и действительно простой способ, как и настоящий — это не будет Font101, но реальный базовый способ выбора шрифтов для вашего сайта — всегда выбирать противоположный, поэтому если ваши заголовки набраны шрифтом с засечками, выберите основной текст без засечек, такого рода, в них достаточно визуальных изменений, чтобы… это действительно хорошая отправная точка. Очень сложно получить два шрифта с засечками для шрифта заголовка и основного текста, потому что часто изменения недостаточно велики, чтобы иметь хорошее визуальное различие между ними. Таким образом, хороший простой способ — выбрать один для заголовка, а затем один для основного текста.

Еще одно правило: просто выберите два шрифта, или один шрифт может работать, если их достаточно… так что шрифт без засечек, такой как Roboto, вы можете использовать для всего сайта. Почему? Потому что для него есть куча разных размеров. Так что черный действительно тяжелый и очень характерный. Таким образом, вы можете использовать это для заголовков, а затем использовать Medium или Regular для основного текста, это тоже будет хорошо работать. Некоторые из этих шрифтов просто не имеют большого разнообразия. У них может быть только пара размеров. Еще одна вещь, которую вы можете сделать здесь, это текст-заполнитель здесь, вы можете щелкнуть по нему, вы можете ввести мое имя, скажем, вы делаете дизайн для кого-то, и вам нужно применить ко всем шрифтам, потому что иногда вы загружаете шрифт и думаете: «Выглядит потрясающе», а затем загружаете его и печатаете свои буквы, а потом говорите: «Чувак, это выглядит паршиво». Выглядело хорошо на линии, но когда вы его загрузили, выглядит не очень хорошо, поэтому вы можете делать все это здесь, играть с размерами и весами, и это довольно весело.

Другие вещи, которые вы можете сделать, когда вы выбираете, скажем, особенно шрифт заголовка, для нашего дизайна здесь это не так уж плохо, у нас есть, вы видите, у нас есть три слова вверху, но наш сайт довольно маленький. Допустим, вы делаете сайт, и он полон сообщений в блогах, или статей, или рецептов, или, я не знаю, но у вас будет много заголовков разного размера и длины. Некоторые могут быть всего 20 символов, а некоторые могут быть 40 символов. Это действительно удобно — вам не нужно, но я определенно принимаю во внимание это соображение, связанное с шириной. Если я перетащу это, включу ширину и перетащу вниз, я дам себе доступ к… давайте включим все это. Я собираюсь дать себе доступ к шрифтам, которые просто тоньше.

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

Не беспокойтесь об этих веб-сайтах, сделайте то же самое и просто посмотрите, где вы находитесь, 2020 год, и вы увидите, что самое интересное в парах шрифтов — это кто-то, в данном случае это Дебби Морган. , она просмотрела и выбрала шрифты, которые хорошо сочетаются друг с другом, и поместила их в Situ, что мне очень нравится, потому что, да, вы можете получить несколько крутых дизайнерских идей. И она набрала, видите ли, с засечками, без засечек, с засечками, без засечек. Это не всегда так, но это вроде как, видите, без засечек, с засечками. И пары шрифтов, вы можете просто сказать: «Хорошо, я буду использовать Raleway с Lato». И больше из этих двух, или их комбинаций. Вы сами выбираете, но это просто удобно, чтобы найти других людей— Мне нравится этот, я никогда не видел этого раньше.