Blogger: Шрифты из шаблона выносим на вкладку Шрифты и цвета!

Здравствуйте!

Сегодня мы с вами поговорим о шрифтах нашего блога, вернее об управлении ими на вкладке Шрифты и цвета. Управлять-то ими легко и статью на эту тему я уже писала Blogger: Изменяем размер шрифта и это все работает для стандартных (рекомендованных Blogger'ом) шаблонов. Проблемы начинаются когда блоггеры устанавливают себе скаченные из интернета шаблоны для Blogger'а . Многие из них красивы, но не поддерживают всех возможностей платформы Blogger. В прошлой статье я рассказала и опубликовала маленькое видео как "вынести" управление цветом вашего шаблона на вкладку "Шрифты и цвета" раздела Дизайн на Панели инструментов (Blogger: Цвета из шаблона выносим на вкладку Цвета и шрифты). Сегодня мы продолжим улучшать управление шаблоном и сделаем на вкладке "Шрифты и цвета" возможность управления и шрифтами шаблона.

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

1) Как и в прошлый раз мы делаем заготовку в Блокноте:

<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f3" description="Шрифт 3"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f4" description="Шрифт 4"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f5" description="Шрифт 5"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f6" description="Шрифт 6"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f7" description="Шрифт 7"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f8" description="Шрифт 8"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f9" description="Шрифт 9"
type="font" default="normal normal 100% Georgia, Serif">

Про имя переменной (variable), мы с вами уже знаем, про описание переменной (description) тоже, тип переменной (type) теперь font, что и понятно, потому что описываем мы с вами переменные для шрифтов.

А вот про значение по умолчанию (default) т.к. оно стало намного сложнее придется поговорить подробно.

Все дело в том что описатель шрифта font это описатель набора свойств шрифта.

Свойства в списке располагаются в следующей последовательности: font-style font-weight font-size font-family

Для параметра font-style в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или italic (курсив)

Для параметра font-weight в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или bold (полужирный)

Задавать параметр font-size в значении по умолчанию можно только в процентах.

А font-family может быть только выбрана из значений Arial, Courier, Georgia, Times, Trebuchet, Verdana.

Идея "вынесения" шрифтов на вкладку Шрифты и цвета осталась таже. Не ставя галочку на Расширить шаблоны виджета ищем слово font в Html-коде нашего шаблона.

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

font: 1em/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif;
font:bold 100% verdana, arial, helvetica, sans-serif;
font:3em Georgia,Times New Roman,Trebuchet;

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

А в блокноте в описании значения по-умолчанию этой переменной можно поставить:
1) на первой позиции normal (если мы не встретили italic)
2) на второй позиции normal (если в коде не упоминалось bold)
3) на третьей позиции 100% (если вы не видите в описании другие цифры со знаком процент, все эти 3em, 1em/1,5 em тоже размеры, но Blogger во вкладке "Шрифты и цвета" их не поддерживает, единственное, что можно сказать, что если 1.5em - это 100%, то 3em будет 200%).
4) на четвертой позиции мы поставим семейство шрифтов его можно целиком вставить в дефолтное значений.

Итак в Html-коде у нас будет:

font: $f0;
font: $f1;
font: $f2;

А в Блокноте если мы поменяем значения по умолчанию:

<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 120% Verdana, Geneva, Arial, Helvetica, sans-serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal bold 100% verdana, arial, helvetica, sans-serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 300% Georgia,Times New Roman,Trebuchet">

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

Это может быть что-то одно или сразу несколько описателей font-size font-weight font-style или font-family. Бывают и другие описатели, например font-variant (их мы на имя переменной не заменяем, а оставляем как есть). А уже известные нам описатели, изменение которых на вкладке Шрифты и цвета Blogger поддерживает мы заменим на font: и имя ОДНОЙ переменной;

В одном месте Html-кода шаблона над которым я работала встретилось такое описание некоторого блока:

{
text-align:justify;
font-size:14px;
font-weight:bold;
}

я его заменила на

{
text-align:justify;
font:$f4;
}

А в Блокноте изменила значения по умолчанию только в известных позициях:
<Variable name="f4" description="Шрифт 4"
type="font" default="normal bold 120% Georgia, Serif">

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

Конец определения переменных ------- */

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

Прошу прощения за скучное описание, но может быть кому-нибудь пригодится.