Селекторы CSS
Последнее обновление May 21, 2021 08:40:06 AM GMT
Селекторы CSS сообщают браузеру, где применять веб-шрифты, которые вы используете, а также толщину и стиль шрифта, который будет использоваться для текста.
Использование имен семейств шрифтов в CSS
На странице веб-проекта указаны имя семейства CSS-шрифтов, числовое значение насыщенности и стиль шрифта для каждого шрифта в проекте. Щелкните ссылку «Редактировать проект», чтобы просмотреть сведения CSS для каждого проекта.
После того как вы включили код встраивания в свой документ, используйте эти имена семейств шрифтов в CSS, чтобы применить шрифты к тексту. Например:
h2 {
font-family: "brandon-grotesque", sans-serif;
}Указание резервных шрифтов
Если браузер пользователя не поддерживает веб-шрифты или они не загружаются по какой-либо причине, вместо них будут использоваться резервные шрифты в стеке CSS.
Стек шрифтов должен содержать по крайней мере один резервный шрифт, который одинаково доступен на всех платформах (например, Georgia или Arial), за которым следует общее имя семейства шрифтов (например, serif или sans-serif).
Использование нескольких значений насыщенности и стилей
Вы можете указать насыщенность шрифта, отличную от значений «нормальный» и «жирный», используя числовые значения толщины шрифта в CSS. Числовые значения чаще всего соответствуют таким значениям толщины:
- 100 = тонкий
- 200 = сверхсветлый
- 300 = светлый
- 400 = нормальный, книжный
- 500 = средний
- 600 = полужирный
- 700 = жирный
- 800 = плотный
- 900 = черный
Числовые значения для всех шрифтов в вашем проекте указаны на странице веб-проектов.
Например, используйте этот CSS, чтобы применить насыщенность шрифта 700 к элементу h2:
h2 {
font-weight: 700;
}Использование вариативных имен в Internet Explorer 8
Internet Explorer 8 загружает максимум четыре значения насыщенности на семейство, а использование двух расположенных рядом значений насыщенности (например, 600 и 700) может привести к правильной загрузке только одного значения насыщенности.
При необходимости название варианта должно быть добавлено в начале стека font-family перед основным именем семейства:
#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}Имена состоят из обычного названия семейства шрифтов, за которым следует тире, затем описание варианта шрифта (или FVD). Например, вариативное имя для brandon-grotesque, который содержит шрифт насыщенностью 700, будет иметь вид brandon-grotesque-n7.
Вариативное имя не задается в браузерах, у которых нет таких проблем, поэтому они будут использовать полное имя семейства, которое идет вторым в стеке.
Большинству пользователей не нужно использовать эти дополнительные имена семейств шрифтов. Вам нужно будет добавить их только в том случае, если вы заметите проблемы с правильным отображением шрифтов, например в Internet Explorer 8.
Вход в учетную запись
Войти
Управление учетной записью
font-family в CSS | WebReference
CSS предлагает несколько свойств шрифтов, непосредственно влияющих на визуализацию текста. Свойство font-family определяет, какой шрифт использовать.
Общие семейства шрифтов
Шрифты группируются по пяти общим семействам:
- serif — на конце каждого символа прикреплены небольшие линии;
- sans-serif;
- monospace;
- cursive;
- fantasy.
cursive и fantasy никогда не используются.
Поскольку свойство font-family наследуется всеми дочерними элементами HTML, вы можете применить шрифт для всего HTML-документа, используя его для предка всех элементов HTML: элемента <body>.
body { font-family: sans-serif; }С этим правилом CSS веб-страница будет использовать шрифт sans-serif, определённый пользователем в его настройках.
Надёжные веб-шрифты
Проблема использования общих названий семейств шрифтов заключается в том, что дизайн вашей веб-страницы будет полагаться на шрифт, установленный пользователем в его настройках. Но вы, вероятно, хотите, чтобы ваша веб-страница выглядела одинаково на любом компьютере и пожелаете определить конкретный шрифт, который будет использоваться. Чтобы сделать это, просто укажите название шрифта.
body { font-family: Arial; }Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).
Arial является безопасным выбором, хотя бы потому, что он установлен на всех компьютерах Windows и Mac, а также на большинстве систем Linux. Именно поэтому Arial считается надёжным веб-шрифтом: вы можете безопасно использовать его в CSS и быть почти уверены, что шрифт на компьютере пользователя будет установлен.
Есть девять надёжных веб-шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Применение списка шрифтов
Хотя использование любого из этих значений для свойства font-family является безопасным выбором, вы можете определить запасные значения, написав список семейств шрифтов:
body { font-family: Arial, Verdana, sans-serif; }При определении нескольких значений для font-family, браузер будет искать первое значение Arial и использовать его. Если Arial не доступен, то будет использоваться следующий шрифт Verdana. И, наконец, если и он не доступен, то будет использоваться шрифт браузера без засечек по умолчанию.
Это хорошая практика использовать общее семейство как последнее значение. Если вы не можете определить конкретный шрифт для использования, то можете по крайней мере, определить тип желаемого шрифта.
Поскольку дизайнеры хотят использовать больше оригинальных шрифтов, но по-прежнему желают, чтобы их веб-страницы выглядели одинаково на любом компьютере, можно включить шрифт на веб-страницу. Таким образом, шрифт будет доступен, даже если он не присутствует на компьютере пользователя, просто потому, что шрифт предложит сайт.
Автор: Джереми Томас
Последнее изменение: 13.04.2018
Как изменить шрифт в теме WordPress
Изменить шрифт в теме WordPress очень просто — для этого вы можете использовать плагин Kirki. В тех случаях, когда вы хотите добавить набор символов, например греческий или кириллицу, вы можете выбрать проверку Google Fonts .
Итак, первый шаг, который вам нужно сделать, чтобы изменить шрифт, — это перейти на https://fonts.google.com/ и просмотреть коллекцию шрифтов, чтобы увидеть, какой из них вы хотели бы использовать на своем веб-сайте. Поиграйте со шрифтами и не забудьте ввести случайные слова рядом с предварительно введенным текстом или вместо него, чтобы увидеть, как работает шрифт.
Как только вы найдете тот, который вам нравится больше всего, нажмите «+» (значок плюса) до добавьте шрифт в свою коллекцию .
Второй шаг — нажать на черную полосу, появившуюся внизу экрана сразу после того, как вы нажали значок плюса.
Третий шаг — щелкнуть вкладку Настроить , чтобы настроить шрифт — вы можете сделать его полужирным и/или курсивом, а также поиграть с набором символов — расширенная латиница, греческий, кириллица и т. д. Обратите внимание, что не все шрифты поддерживают все стили и символы.
Четвертый шаг — нажать на Встроить вкладка. Как только вы это сделаете, вы увидите, что существует два метода встраивания шрифта в вашу тему — стандартный метод и использование @import .
Стандартным методом
Вот шаги, которые необходимо предпринять, если вы хотите изменить шрифт стандартным методом:
Примечание. Поскольку вы собираетесь внести изменения в файлы header.php и style.
css , обязательно сделайте резервную копию обоих. На случай, если что-то пойдет не так, у вас будут резервные файлы.
1. Откройте папку с темой с помощью FTP-клиента и перейдите в ../wp-content/themes/имя_темы/. Загрузите файл header.php.
2. Откройте файл с помощью текстового редактора и под закрывающим тегом Title вставьте ссылку на шрифт.
3. Сохраните изменения и загрузите файл в исходное место.
4. Загрузите файл style.css, расположенный в …/wp-content/themes/имя_темы/стиль/. В некоторых наших темах этот файл также находится в …/wp-content/themes/theme_name/style/style.css.
5. Откройте файл с помощью текстового редактора и найдите строки, имеющие атрибут font-family.
6. Замените все эти строки семейством шрифтов из шрифтов Google. Замена этой строки изменит шрифт всех заголовков.
7. Когда вы закончите замену всех строк атрибутом font-family, сохраните изменения и загрузите файл в исходное место.
И все готово.
Использование метода @import
Вот шаги, которые необходимо предпринять, если вы хотите изменить шрифт с помощью метода @import:
Примечание. Еще раз: поскольку вы собираетесь внести изменения в файлы header.php и style.css, обязательно сделайте резервные копии обоих файлов.
1. Загрузите файл style.css, расположенный в …/wp-content/themes/название_темы/стиль/. В некоторых наших темах этот файл также находится в …/wp-content/themes/theme_name/style/style.css.
2. Откройте файл с помощью текстового редактора и вставьте код в первую строку. Вам понадобится только код между тегами стиля. Код будет выглядеть примерно так: @import ‘https://fonts.googleapis.com/css?family=Open+Sans’;
3. Затем найдите строки с атрибутом font-family.
4. Замените все эти строки атрибутом font-family из шрифтов Google.
Замена этой строки изменит шрифт всех заголовков. Когда вы закончите замену всех строк атрибутом font-family, сохраните изменения и загрузите файл в исходное место.
Вот и все 一 вы успешно изменили шрифт!
Была ли эта статья полезной?
ДаНет
Неправильно оформленные, нечитаемые страницы на русском языке
Неправильно оформленные, нечитаемые русские страницы CP-1251 ( Win )Такая страница вообще НЕ читается на вашем ПК с любым 9Браузер 0076 — MS Internet Explorer, Netscape, WebSurfer и т. д.
Это значит, что вы нашли страницу, на которой автор сделал неправильных вещей во время разработки —
явно названный шрифт и/или размер шрифта , который будет использоваться для чтения
русского текста.
Если автор не укажет имя используемого шрифта, эта страница будет быть читаемым с использованием ваших русских шрифтов.
Автор либо сам включил эту функцию, либо использовал ПО, которое ему помогло,
например, главную страницу MS.
Эта программа включает такую информацию о шрифтах автоматически, и автор
не удалил его из финальной версии страницы.
Речь идет об элементе «FONT» языка HTML.
Если вы посмотрите на HTML-текст такой страницы, выбрав в меню
View/Document Source ,
то вы увидите, например, следующую строку перед русским текстом:
FONT FACE=Verdana или FONT FACE=Tahoma Size=1Как заявили специалисты WWW , использование элементов FACE= и РАЗМЕР= это плохой стиль HTML, особенно для нелатинские1 тексты (языки, не входящие в западноевропейскую группу) .
См. группу новостей разработчиков WWW comp.
«Что не так со шрифтом?»
и
«FONT FACE считается вредным».
Главное, чтобы пользователь успешно работал с русским языком используя его Русские шрифты (в текстовых процессорах, в браузерах и т.д.), в то время как автор заставляет браузер использовать шрифт он указал в элементе «FONT FACE=»!
MS Front Page автоматически вставляет такой элемент HTML…
Следовательно, если веб-разработчик хочет, чтобы его страница была читаема для всех (Интернет — это сеть для всех, верно?) , затем он/она
может провести 15 минут в текстовом редакторе
Новички в WWW-разработке жалуются, что им это нужно, т.к.
они хотят определенного внешнего вида своей страницы.
Но это можно сделать безопасным способом! Они могут использовать вместо устаревший «FONT FACE=», новый механизм под названием УС (каскадные таблицы стилей).
В CSS можно объявить стиль
Ниже я перечислил случаи, когда HTML-тег «FONT» делает русскоязычную страницу нечитаемой.
1. «ШРИФТ=» .
Самый простой пример — автор окружил свой русский текст
«FONT FACE= MS Sans Serif » или «FONT FACE= Verdana «,
а в его русской версии MS Windows все Окей.
Но пользователь работает под английской виндой, где перечислены шрифты
содержать ли не русские буквы, даже если этот пользователь устанавливает Пакет «Многоязычная поддержка MS».
(Данный пакет предлагает только 3 шрифта — «Arial (Кириллица)»,
«Times New Roman (кириллица)» и «Courier New (кириллица)»).
Русский язык на такой странице будет нечитаем.
Другой пример, не столь очевидный:
.
Автор окружил русский текст тегом «FONT FACE= Arial «.
У некоторых читателей может не быть русских букв в этом шрифте.
В следующих ситуациях русская страница будет нечитаемой если
его HTML-код содержит, например,
..», то они нормально читают по русски.
