Изменение шрифтов на вашем сайте Drupal

Изменение шрифтов на вашем сайте Drupal - манекены

Стиль. Файл css содержит правила для цвета, стиля и размера шрифтов для вашей темы Drupal. Ниже приведено краткое изложение некоторых правил кодирования, используемых для управления появлением шрифтов, которые вы видите в стиле. css:

  • font: Этот тег появляется только один раз в стиле. css и определяет шрифт, который будет использоваться для всего сайта.

  • font-size: контролирует, насколько большой или малый текст.

  • font-weight: Используется для выделения текста жирным шрифтом.

  • font-style: прежде всего используется для установки текста курсивом.

  • text-decoration: контролирует, подчеркнута ли ссылка.

  • color: Устанавливает цвет текста.

Следующие строки кода показывают несколько основных текстовых настроек в стиле. css, который вы можете изменить.

 body {font: 76% / 170% Verdana, Arial, Helvetica, sans-serif; color: # 000000;} 

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

Настройка шрифта, 76% / 170% Verdana, Arial, Helvetica, sans-serif, устанавливает как размер текста, так и шрифт. Если вы хотите использовать другой шрифт и более крупный текст, вы можете изменить эту строку следующим образом:

 font: 100% Times New Roman, Georgia, Serif; 

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

Шрифт больше - и теперь Times New Roman вместо Верданы. В этом примере был выбран меньший размер шрифта и Verdana для стиля, поэтому эта строка была изменена на шрифт: 76% / 170% Verdana, Arial, Helvetica, sans-serif; ,

 a {text-decoration: none; font-weight: bold;} 

Текстовое оформление контролирует, подчеркнуты ли ссылки на вашем сайте. В этом случае это не так. Размер шрифта делает сайт ссылкой жирным шрифтом.

 a: hover {text-decoration: underline;} 

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

 #branding {color: # 000;} 

Если цвет изменен на 000, цвет становится черным и выглядит лучше на фоне желтого.

При изменении кода CSS будьте осторожны, чтобы сохранить знаки препинания в точности так, как они есть. Например, убедитесь, что каждая строка в блоке кода заканчивается точкой с запятой.

Tip "> Trial и error - один из способов выяснить, какие стили в стиле.css принадлежат тем элементам вашего сайта. Но есть более простой способ. Вы можете использовать веб-браузер Firefox и установить надстройку под названием Firebug. Это открывает панель в веб-браузере и показывает, какие стили используют элементы на вашей веб-странице.

На следующем рисунке вы видите, какая строка в стиле. css контролирует внешний вид имени сайта в заголовке. В правом нижнем углу браузера вы можете увидеть, где в коде CSS задано форматирование. Узнайте больше о Firebug в Getfirebug. ком.

Tip "> Вы можете настроить множество других деталей и вносить изменения в темы. Drupal. org / theme-guide - чрезвычайно подробное руководство.