Сайт

Как изменить шрифт на сайте: Как изменить размер и стиль шрифта на сайте

14.06.2021

Содержание

Как изменить шрифт на сайте

Здравствуйте, уважаемые друзья. Сегодня мы поговорим о том, как изменить шрифты на сайте. От того какой шрифт или семейство шрифтов используется и зависит вид, в котором предстаёт сайт перед посетителями.

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

Этот метод идеально подходит для «лендингов».

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

Что влияет на отображение шрифтов сайта

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

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

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

пример для Windows

c:\windows\fonts

где, с: — имя раздела жёсткого диска

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

Настройки браузера

Вот поэтому наиболее широкое распространение получили шрифты Arial, Times New Roman, Verdana, Tahoma. Эти шрифты используются на львиной доле сайтов и блогов.

Какие параметры отвечают за отображение шрифта на сайте

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

Блочная вёрстка

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

Итак, основными параметрами шрифта являются:

font-family: — какими шрифтами будет отображаться ваш сайт.

font-size: — размер шрифта.

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

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

К примеру, на моём блоге это выглядит так:

font- family: Arial,Verdana;

Что говорит о том, что в первую очередь сайт будет отображаться шрифтом Arial, а если у посетителя его нет (маловероятно), тогда Verdana. А если и его нет, то шрифтом, определённым в браузере.

Как настроить красивые шрифты для всех посетителей

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

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

Ну, давайте приступать.

Шаг 1.

Переходим в библиотеку шрифтов Google. И ищем подходящий шрифт для своего сайта.

Библиотека шрифтов Гугл

Нужно выбрать шрифты, поддерживающие кириллицу. Эти же шрифты будут поддерживать и латинские символы. Следовательно, проблем не будет.

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

Шаг 2.

Теперь следует выполнить 4 шага. Учтите, раз вы подгружаете шрифт со стороннего сервера, значит, это влияет на скорость загрузки сайта. В этом, конкретном случае незначительно, но всё же. Как узнать скорость загрузки сайта можете посмотреть здесь.

Первым делом нужно выбрать стиль отображения шрифта.

Стиль шрифта

Далее отмечаете, какие языки должны поддерживаться.

Языки шрифта

Шаг 3.

Теперь предложенный код на третьем этапе нужно вставить в шаблон вашего сайта.

<link href='http://fonts.googleapis.com/css?family=Lora:400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Код, предложенный на третьем шаге, нужно вставить в заголовок вашего сайта. Как правило, за заголовок отвечает файл header.php. Код вставляем в теги ХЕД

<head>Ваш код</head>

Код в шапке сайта

Шаг 4.

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

Для того чтобы узнать где вносить изменения нужно нажать правой кнопкой мышки на исследуемом объекте и в контекстно-зависимом меню выбрать «исследовать элемент». Или что-то вроде этого.

Анализ исходного кода

Главное, узнать класс нужного блока, в каком файле и в какой строке нужно вносить изменения.

Как видно на скриншоте выше, мне нужно найти в файле style.css (таблица стилей) 183 строку и в неё добавить нужный шрифт.

Так как в редакторе WordPress нет номера строки, я использую поиск (CTRL+F) и ищу класс нужного мне блока. Найдя его, вношу нужные изменения.

Изменяем шрифт

Вы, на моём примере, делаете нечто подобное, но со своей темой.

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

Шрифт изменен

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

И обязательно посмотрите видеоурок, в нём я всё наглядно показываю и рассказываю, всё по теме.

До встречи в следующих статьях.

С уважением, Максим Зайцев.

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

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

<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc

2.

<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>

<p><b><i>Жирный курсив.</i></b></p>

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

<p>Подчеркнутый параграф текста.</p>

<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H2SO4 — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

<тег>…</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>

<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый.</span>
</p>
</body>
</html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif.
 </p>

 <p>
    Это Comic Sans MS или любой cursive.
 </p>

 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>

 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY.
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Посмотреть результат → Посмотреть ответ

Размер шрифта и масштаб страниц — увеличьте размер веб-страниц

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

Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.

  1. Щёлкните по кнопке меню с правой стороны. Откроется меню настройки, и наверху вы увидите управление масштабом.
  2. Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования — щёлкните по нему, чтобы сбросить масштаб на 100%. Вы также можете видеть текущий уровень масштабирования в адресной строке:

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая commandCtrl, нажмите + для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.

Совет: Чтобы установить уровень масштабирования по умолчанию для всех веб-сайтов, вы можете попробовать дополнение, такое как Fixed Zoom или Zoom Page WE.

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

Щипковое действие в настоящее время поддерживается в Windows через сенсорный экран и высокоточные тачпады, на Mac через тачпады и в Linux через сенсорные экраны. Тачпады Linux в настоящее время не поддерживаются, и ожидается, что поддержка будет добавлена в будущем.

Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.

  1. Нажмите на клавишу Alt для временного переключения в традиционные меню Firefox. В меню в верхней части откройте меню , затем выберите подменю .
  2. Выберите , что заставит Firefox изменить размер текста, а не изображений.

Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:

  1. На Панели меню в верхней части экрана щёлкните и выберите .Нажмите на кнопку меню и выберите Настройки.Настройки.Настройки.
  2. В панели перейдите к разделу Язык и внешний вид.
  3. Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
    • Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.
  4. Закройте страницу about:preferences. Любые сделанные изменения будут сохранены автоматически.

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

  1. На Панели меню в верхней части экрана щёлкните и выберите .Нажмите на кнопку меню и выберите Настройки.Настройки.Настройки.
  2. В панели перейдите к разделу Язык и внешний вид.
  3. Под разделом Шрифты и цвета щёлкните по кнопке Дополнительно….
  4. В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
  5. Щёлкните OK, чтобы сохранить изменения.

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

Как изменить шрифт всего сайта или всего HTML?



У меня есть WhatsCast.in, и я хочу изменить шрифт всего сайта или файла HTML.. Помогите.. Я новичок в кодировании, так что скажите мне, куда поместить код и так далее… заранее спасибо.

html
Поделиться Источник WebPanda     13 ноября 2015 в 08:43

2 ответа

  • Android — Как установить пользовательский шрифт для всего приложения

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

  • Graphviz: изменить шрифт для всего графика?

    Мне интересно, могу ли я определить альтернативный шрифт для всего графика. … digraph script_concept { graph [layout=dot,fontname=helvetica]; … Согласно этому 1 старый пост характеристик шрифта, могут быть определены только отдельно: Узлы и ребра не наследуют шрифт графа, их нужно указывать…


1

Поместите объявление font-family в селектор тела:

body {
  font-family: Algerian;
}

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

Поделиться Bhanu Chandra     13 ноября 2015 в 08:49


1

Вот список веб-безопасных шрифтов на выбор

HTML

<html>

</html>

css

.myFontClass{
    font-family: Helvetica; 
}

Поделиться jShoop     13 ноября 2015 в 08:51

Похожие вопросы:


Как установить шрифт всего приложения в win api?

Возможные Дубликаты : Как установить шрифт по умолчанию для всех windows в приложении Win32? Какой шрифт используется по умолчанию для диалоговых элементов управления MFC? Я ненавижу шрифт окна…


SIFR шрифт для всего сайта-плохая идея?

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


Изменить системный шрифт для iPhone приложения-всего приложения

Есть ли способ изменить системный шрифт для всего приложения? Я хочу определить шрифт для всего приложения, чтобы мне не нужно было переходить к отдельным меткам или отдельным шрифтам, чтобы…


Android — Как установить пользовательский шрифт для всего приложения

Возможный Дубликат : Можно ли установить шрифт для всего приложения? Мне нужно установить пользовательский шрифт (формат. ttf) для всего приложения, как я могу это сделать? Из манифеста или XML…


Graphviz: изменить шрифт для всего графика?

Мне интересно, могу ли я определить альтернативный шрифт для всего графика. … digraph script_concept { graph [layout=dot,fontname=helvetica]; … Согласно этому 1 старый пост характеристик шрифта,…


Можно ли изменить шрифт всего приложения в jquery mobile

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


как изменить макет всего сайта в DotNetNuke 7

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


Как изменить шрифт для всего приложения wxPython

У меня есть приложение wxPython (использующее 2.8), построенное с python 2.7. Есть ли способ изменить шрифт для всего приложения ? Я имею в виду, что я хотел бы изменить шрифт для любого…


Как изменить шрифт всего приложения

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


Как изменить формат номера для всего сайта wordpress?

Мне нужно изменить формат номера для всего моего сайта, так как разные страны используют разные форматы, такие как Соединенные Штаты-$1,234,567.89 USD Канада — $1,234,567.89 CAD Великобритания -…

Как я могу изменить шрифт веб-страницы, которая уже находится на стороне клиента?



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

Ex. URL: http:/ / beta.aawsat.com / home / article / 49661

Обратите внимание, что у нас уже есть опция «-» или «+» для управления размером шрифта. Каков был бы наилучший способ, который я мог бы предоставить клиенту, чтобы изменить лицо шрифта на лету ?

Например, в Font-Squirrel вы можете изменить свойство шрифтов, выбрав опцию в раскрывающемся списке …

Ex. URL: http:/ / www.fontsquirrel.com / шрифты / иноходь

Есть ли в любом случае, что я могу сделать что-то подобное, чтобы изменить шрифт статьи ? В идеале будет предоставлен выпадающий список с 3-5 вариантами веб-шрифта для выбора, а затем статья изменит шрифт на лету …

Какие-нибудь советы, ссылки или идеи?

  1. В настоящее время сайт работает над Drupal.

  2. По умолчанию шрифт, загружаемый для статьи, равен «Tahoma»

  3. Подобно функции увеличения или уменьшения размера текста с помощью кнопок»+/ -«, я пытаюсь понять, как я также могу предоставить функцию, с помощью которой конечный пользователь может выбрать шрифт, с которым он хочет прочитать статью.

  4. Я хочу дать конечному пользователю возможность использовать 3-5 шрифтов в качестве выпадающего списка, и когда он выберет шрифт, текст статьи будет повторно загружен или изменен с помощью этого выбора.

  5. На стороне клиента (т. е. Front-End), есть CSS, jQuery, которые используются в настоящее время.

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

jquery html css font-face webfonts
Поделиться Источник Fawaz Taj     04 марта 2014 в 19:12

2 ответа

  • Аннотирование веб-страницы на стороне клиента

    Я пытаюсь разработать надстройку firefox, которая позволила бы мне выделить текст на веб-странице (любой клиентской стороне веб-страницы), а затем все это позволяет мне написать заметку и сохранить ее. Поэтому, когда я посещаю веб-страницу в следующий раз, если для веб-страницы существует…

  • Как перекрасить веб-сайт на стороне клиента?

    Есть ли способы перекрасить веб-сайт (на стороне клиента), где формат и макет страницы в основном известны и постоянны? Например, изменение языка определенной формы на eBay на японский. Я знаю, что с Opera и Firefox CSS веб-сайта может быть переопределен. Существуют ли какие-либо способы в любых…


2

  1. Определите различные классы CSS для каждого шрифта.
  2. Установите различные шрифты в таблице стилей CSS для каждого класса.
  3. Используйте элемент интерфейса, чтобы выбрать шрифт и применить соответствующий класс к элементу <body> .

Пример в этом fiddle

Поделиться Stephen Thomas     04 марта 2014 в 19:17


0

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

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

Поделиться TchiYuan     04 марта 2014 в 19:21

Похожие вопросы:


Как обойти проверку ASP.NET на стороне клиента, чтобы проверить проверку на стороне сервера

Я заинтересован в определении средства проверки того, что проверка на стороне сервера выполняется должным образом, но мне нужно обойти проверку на стороне клиента, выполняемую с помощью элементов…


Как динамически изменить заголовок веб-страницы?

У меня есть веб-страница, которая реализует набор вкладок, каждая из которых показывает различный контент. Щелчки по вкладкам не обновляют страницу, а скрывают/отображают содержимое на стороне…


Создание эскизов веб-страниц, посещенных на стороне клиента

Я разрабатываю расширение-firefox, поэтому с помощью этого расширения я отслеживаю страницы, которые посещает пользователь, и теперь я хочу иметь возможность всплывать миниатюрой веб-страницы, когда…


Аннотирование веб-страницы на стороне клиента

Я пытаюсь разработать надстройку firefox, которая позволила бы мне выделить текст на веб-странице (любой клиентской стороне веб-страницы), а затем все это позволяет мне написать заметку и сохранить…


Как перекрасить веб-сайт на стороне клиента?

Есть ли способы перекрасить веб-сайт (на стороне клиента), где формат и макет страницы в основном известны и постоянны? Например, изменение языка определенной формы на eBay на японский. Я знаю, что…


Вызов» param.get » на стороне клиента?

Благодаря большой помощи на этом форуме, я смог заставить это работать: Отображение диалогового окна библиотеки расширений при загрузке страницы? Теперь мне нужно не отображать диалоговое окно, если…


Как изменить только DESIGN временно (на стороне клиента) внешнего сайта, к которому у меня нет прямого доступа?

Это обычный веб-сайт, который имеет CAPTCHA и форму, которая отправляет и проверяет правильность CAPTCHA, а затем берет идентификатор и делает запрос на некоторую информацию. У меня нет доступа к…


Получить содержимое страницы междоменного запроса на стороне клиента

У меня небольшая проблема. Мне нужно получить содержимое страницы, но оно должно быть запрошено с клиентской машины (по сути, с клиентским ip — адресом). И мне нужно получить доступ к строке…


Как я могу изменить библиотеку, которая используется как на стороне сервера, так и на стороне клиента, используя одно объявление?

Я использую Moment.js как на стороне клиента, так и на стороне сервера для форматирования дат. Я хочу изменить некоторые аспекты форматирования Moment.js и хочу, чтобы эти изменения применялись как…


Сохранить .CSS изменений на веб-сайте на стороне клиента

Я внес некоторые изменения в .CSS для веб-сайта, могу ли я сохранить эти изменения, чтобы при следующем запуске веб-сайта они были сохранены? Я понимаю, что не могу изменить код сервера. Я…

3 плагина WordPress для смены шрифтов на сайте


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

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

Плагин Fontific | Google Fonts

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

Разработчиками были реализованы следующие возможности плагина:

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

К преимуществам данной технологии можно отнести легкость и гибкость настройки, а также использование шрифтов надежного и эффективного сервиса Google Web Fonts.

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

Смотреть плагин, на официальном сайте

Не забываем про SEO:


Плагин WP-Cufon

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

Генерация скриптов Cufon из шрифтов пользователя выполняется на сервисе Cufon Generator. С генерированные файлы помещаются в созданную ранее папку и затем прописываются строки замены:

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

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

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

Вы можете подробнее ознакомиться с установкой и настройкой на сайте Cufon шрифта.

Смотреть плагин, на официальном сайте

Плагин AnyFont

Данный плагин требует регистрации на сервисе FontServ.com. Следует отметить, что хотя сервис платный, но имеется возможность воспользоваться бесплатной версией для одного сайта. Работа с этим плагином начинается с регистрации на сайте, загрузки шрифтов пользователя и дальнейшем их переводе в веб-шрифты (файлы форматов EOT, SVG и WOFF). Кроссбраузерность данного продукта начинается с IE5.

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

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

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

Смотреть плагин, на официальном сайте

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

А на последок, для тех кто хочет сделать интернет магазин на WordPress:

Как изменить шрифт в Joomla, поменять размер и стиль

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

Шрифт в Joomla

Как правило, макет содержит шрифт, стоящий первым в списке. Соответственно, проставить свой шрифт (к примеру, Ubuntu) можно, только поставив его название первым. Кроме того, указывая свой шрифт перед Arial, вы добьетесь вызова по умолчанию желаемого Ubuntu, а затем уже будет отображаться Arial, Verdana либо sans-serif.

Лучше, если проставлено несколько вариантов, чтобы не потерять пользователя изза такой досадной чепухи. Заходите в Расширения / Менеджер шаблонов / Свой шаблон / Редактировать CSS, вписывая нужный шрифт в строчку font-family: 1шрифт, 2шрифт и т.д.

Размер

Чтобы изменить размер шрифта заголовков, подзаголовков и самого текста, внутри административной панели Jooma вашего сайта потребуется изменить некоторые настройки. Подобная проблема может возникать, если по умолчанию используется визуальный редактор TinyMCE (в «Общих настройках» в разделе «Сайт»). По умолчанию в этом редакторе установлен размер шрифта 10 пикселей, однако решить проблему можно созданием пользовательских настроек размера шрифта с помощью CSS, после чего произвести настройку размеров шрифтов для использования в вашем редакторе.

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

Для создания файла CSS нужно воспользоваться текстовым блокнотом, чтобы получить следующую запись:

body, td, pre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.6em; }

В этом файле CSS я отобразил шрифт на 160% больше от первоначального показателя. Желаемый размер выбирается с использованием пикселей (13px), пойнтов (13pt), но для удобства лучше применять форму записи в процентах (em), т.к. они подходят для всех браузеров. В дальнейшем, это поможет избежать проблем с отображением административной панели в предпросмотре разными браузерами.

Цвет шрифта

Цвет шрифта меняется аналогично размеру и типу шрифта. Единственно, в чем состоит разница, так это в выбранных параметрах. Цвет шрифта, равно как и фон сайта меняется внутри меню административной панели, в шаблоне JA_Purity. Находим в Расширениях/ Менеджее шаблонов / Своем шаблоне / Редактировать CSS и вписываем нужный цвет (например, blue) в параметр color (цвет фона – в параметре background  #ffffff):

Требуемый цвет шрифта готов!

Стили CSS

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

Отображение классов CSS, ответственных за оформление пунктов меню имеет следующий вид:

Измените макет, тему, цвета или шрифты вашего сайта

С помощью Сайтов Google вы можете легко изменить общий вид своего сайта, отредактировав его макет, темы, цвета и шрифты.

Макет сайта

  1. Чтобы начать редактирование макета сайта, нажмите кнопку Дополнительно в правом верхнем углу окна браузера.
  2. Выберите Изменить макет сайта .
  3. Теперь вверху вашего сайта вы увидите панель инструментов, в которой перечислены элементы вашего сайта.Щелчок по одной из кнопок панели инструментов включает и выключает этот элемент.
  4. В отдельные элементы вашего сайта легко вносить изменения. Чтобы увидеть, что вы можете редактировать, наведите указатель мыши на части своего сайта; те, которые вы можете редактировать, будут выделены синим цветом. Чтобы изменить элемент, просто щелкните его. Вы сможете изменить следующие элементы:
    • Заголовок : измените высоту и выравнивание заголовка и добавьте логотип.
    • Горизонтальная панель навигации : измените стиль панели навигации и выберите, какие страницы вашего сайта будут там отображаться.
    • Боковая панель : Выберите, как называть свою боковую панель, как она будет организована и на что будет ссылаться.
    • Нижний колонтитул : добавление и форматирование текста нижнего колонтитула.
  5. После того, как вы щелкнули элемент и внесли изменения в появившемся диалоговом окне, нажмите кнопку ОК окна, чтобы сохранить изменения.
  6. Когда вы закончите вносить все необходимые изменения, выйдите из редактора макета, нажав синюю кнопку Закрыть в правом верхнем углу окна браузера.

Темы сайта

  1. Выберите Управление сайтом в раскрывающемся меню Еще .
  2. Выберите Темы, цвета и шрифты на левой боковой панели.
  3. Выберите тему, которую хотите использовать для своего сайта. (Вы можете увидеть, как будет выглядеть ваш сайт, используя эту тему, нажав кнопку «Предварительный просмотр» вверху или ссылку Preview под каждой темой.
  4. Нажмите «Сохранить изменения».

Цвета и шрифты сайта

  1. Выберите Управление сайтом из раскрывающегося меню Еще .
  2. Выберите Темы, цвета и шрифты на левой боковой панели.
  3. В поле прокрутки выберите, какой аспект вашего сайта вы хотите изменить. Для большинства параметров вы можете использовать значение по умолчанию для темы вашего сайта, отключить этот параметр или выбрать настраиваемое значение. Для изображений вы можете выбрать собственное изображение. Для текста обычно можно выбрать цвет из набора или ввести свой собственный шестизначный цветовой код. Внесенные вами изменения будут отражены в области Preview в считанные секунды.Некоторые из областей, которые вы можете настроить, включают:
    • Вся страница : эти параметры задают значение по умолчанию для вашего сайта, хотя вы можете переопределить большую часть этого форматирования, выбрав определенные шрифты, цвета или изображения в других разделах или форматируя на конкретная страница.
    • Заголовок сайта : Если вы не отключили заголовок, эти параметры управляют содержимым в области, которая отображается в верхней части каждой страницы.
    • Область содержимого : эти параметры управляют областью главной страницы, где будет находиться большая часть вашего содержимого.Вы можете переопределить это форматирование, внося изменения на отдельных страницах.
    • Гаджеты области содержимого : Эти элементы будут форматировать гаджеты, которые вы размещаете в основной области своих страниц, например текстовые поля или слайд-шоу.
    • Гаджеты боковой панели : Если вы не отключили боковую панель, эти элементы будут форматировать гаджеты, которые вы разместите на боковой панели.
    • Горизонтальная навигация : Если вы выбрали включение горизонтальной панели навигации, эти параметры будут форматировать ваши горизонтальные меню.
  4. Нажмите «Сохранить изменения».

Пользовательские шрифты — Поддержка — WordPress.com

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

Чтобы изменить шрифты, вы будете использовать либо Global Styles , либо Customize Fonts , в зависимости от того, какую тему вы используете.

Содержание

Изменение шрифтов с помощью глобальных стилей

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

  1. С Мои сайты перейдите на страниц.
  2. Нажмите кнопку «Добавить новую страницу» или щелкните заголовок существующей страницы, чтобы открыть его в редакторе блоков.
    • При добавлении новой страницы выберите предпочитаемый макет или пустой макет по умолчанию.
  3. В редакторе WordPress нажмите кнопку «Глобальные стили». Это кнопка «A», расположенная между кнопкой «Параметры документа» и зеленой кнопкой Jetpack.
  4. Щелкните раскрывающееся меню в разделе «Заголовки» или «Базовый шрифт», чтобы узнать, какие варианты шрифта доступны.

Шрифты задаются парами, один для заголовков, а другой для основного шрифта.

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

В меню «Глобальные стили» нажмите Опубликовать , чтобы сохранить новые пары шрифтов, или Сбросить , чтобы отменить изменения.

Публикация изменений в меню «Глобальные стили» не приведет к публикации конкретной страницы, над которой вы работаете.

Регулировка размера шрифта

Редактор блоков предоставляет параметры для изменения размера шрифта в отдельных блоках.

Чтобы изменить размер шрифта заголовка, выберите другой заголовок (h2, h3 и т. Д.) В блоке заголовка.

Параметры с H5 по H6 расположены в настройках блока сбоку от редактора блоков.

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

Пример параметров типографики для блока абзаца

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

↑ Содержание ↑

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

Во многих темах есть опции для изменения шрифта, выбрав « Мой сайт» → «Внешний вид» → «Настроить ». Если там нет параметров шрифта, проверьте, поддерживает ли ваша тема метод изменения шрифтов Global Styles.

  1. Из Мои сайты перейти на Внешний вид → Настроить.
  2. Щелкните параметр Fonts в настройщике.
  3. Щелкните раскрывающийся список под заголовками или основным шрифтом, чтобы увидеть, какие варианты шрифта доступны.

Шрифты задаются парами, один для заголовков, а другой для основного шрифта.

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

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

Регулировка размера и стиля шрифта

Стиль шрифта — Чтобы настроить стиль шрифта заголовка , щелкните параметр ниже и слева от шрифта. Доступные стили будут различаться в зависимости от выбранного вами шрифта.

Размер шрифта — Чтобы настроить размер заголовка или базового шрифта, щелкните параметр размера ниже и справа для каждого выбранного шрифта и выберите размер в раскрывающемся меню.

С тарифным планом WordPress.com Premium или выше вы можете добавить собственный CSS, чтобы изменить размер шрифта и стиль различных элементов на вашем сайте.

Сохранение шрифтов

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

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

Изменение шрифтов

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

Чтобы изменить используемые пользовательские шрифты, перейдите к Внешний вид → Настройка → Шрифты и выберите другой заголовок или основной шрифт.Или вы можете вернуться к шрифту по умолчанию вашей темы, щелкнув X справа от имени настраиваемого шрифта.

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

Щелкните X рядом с настраиваемым продолжением, чтобы восстановить шрифт по умолчанию для темы.

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

Сброс шрифтов

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

↑ Содержание ↑

Часто задаваемые вопросы
Могу я добавить еще шрифтов?

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

Могу ли я подключить Typekit.com на мой сайт WordPress.com?

Невозможно подключить внешнюю учетную запись Typekit.com к сайту или блогу WordPress.com.

Будут ли шрифты отображаться на моем языке?

Некоторые инструкции из этого руководства относятся к панели управления WP Admin. Вы можете перейти на эту панель управления, добавив / wp-admin в конец URL-адреса вашего сайта (например: example.wordpress.com/wp-admin)

Если вы выбрали нелатинский язык для блога в WP Admin в разделе «Настройки» → «Общие», то будут загружены все символы пользовательского шрифта.Если вы выбрали латинский язык, например английский, итальянский, португальский или испанский, то будет загружена только меньшая часть шрифта. Если в вашем блоге некоторые символы отображаются некорректно, сначала проверьте языковые настройки, чтобы убедиться, что вы выбрали язык, на котором пишете, а затем перейдите в Customizer → Fonts и повторно сохраните шрифт, чтобы он обновился до вашего новые языковые настройки.

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

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

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

Это называется «Вспышка не стилизованного текста» (FOUT). При более медленном подключении текст сначала отображается шрифтом темы по умолчанию. Таким образом, люди могут начать читать ваш контент до того, как загрузится ваш собственный шрифт, вместо того, чтобы ждать, глядя на пустую страницу.Это может означать, что перед загрузкой страницы будет мигать другой шрифт, но в целом это лучше для зрителей с медленным подключением, чем пустой экран. Если вы не хотите, чтобы это происходило, вы можете добавить этот код CSS на свой сайт с помощью редактора CSS в разделе Внешний вид → Настройка → Дополнительный CSS (только для тарифного плана Premium и выше): .wf-loading body { видимость: скрыта; }

Как использовать CSS для изменения шрифтов на веб-страницах

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

Снимки экрана ниже относятся к игровой площадке кода JSFiddle.net, но описанные концепции верны независимо от того, где реализован ваш код.

Дерек Абелла / Lifewire

Как изменить шрифт с помощью CSS

Внесите изменения HTML и CSS, описанные ниже, с помощью любого редактора HTML или текстового редактора.

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

    Этот текст находится в Arial

  2. Обведите текст элементом SPAN:

     Этот текст в Arial

  3. Добавьте атрибут style = «» к тегу span:

     Этот текст в Arial

  4. В атрибуте style измените шрифт, используя стиль font-family .

       Этот текст в Arial
    Джон Фишер

  5. Сохраните изменения, чтобы увидеть эффекты.

Советы по использованию CSS для изменения шрифта

  1. Наилучший подход — всегда иметь как минимум два шрифта в стеке шрифтов (списке шрифтов), чтобы, если в браузере нет первого шрифта, он мог использовать вместо него второй.

    Разделите несколько вариантов шрифта запятой, например:

    семейство шрифтов: Arial, Geneva, Helvetica, sans-serif;

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

     
     Этот текст в Arial

    В этом примере файл CSS для стилизации указанного выше HTML будет выглядеть следующим образом:

    .arial {семейство шрифтов: Arial; }
    Джон Фишер

  3. Всегда заканчивайте стили CSS точкой с запятой (;). Это не обязательно, когда есть только один стиль, но это хорошая привычка.

Изменение шрифта веб-сайта — Справочный центр eCatholic

В центре поддержки eCatholic нас часто спрашивают, можно ли изменить шрифт на веб-сайте eCatholic.Для этого есть много причин (некоторые из них лучше, чем другие!), Но причина номер один заключается в том, чтобы выровнять ваш бренд в вашей печати и на веб-сайте. Так что да, его можно изменить, если вам удобно вносить изменения в CSS (см. Ниже) или если вы хотите, чтобы выполнялась индивидуальная работа.

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

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

  1. При выборе основного шрифта для большей части текста используйте обычные шрифты, такие как Arial, поскольку он упрощает чтение и удобен для людей, которые быстро сканируют веб-страницы.Если вы хотите использовать необычный текст, сохраните его для заголовков модулей или заголовков страниц.
  2. Учитывайте удобочитаемость при выборе шрифта. Использование шрифтов без засечек предназначено для чтения издалека и привлечения внимания, тогда как шрифты с засечками предназначены для чтения вблизи и помогают установить личную связь с тем, что читается. Подумайте о своей аудитории и используйте то, что им больше всего нравится.
  3. Лучше всего использовать веб-безопасный шрифт, что означает, что он обеспечивает максимальную совместимость между браузерами / операционными системами.
Как получить доступ к CSS:

Сначала перейдите в Design Studio . Под текущей темой вы увидите ссылку «Создать настраиваемую тему из этой темы» или «Изменить настраиваемую тему», если вы уже внесли некоторые изменения. Щелкните эту ссылку, чтобы создать настраиваемую тему и получить доступ к редактору темы.

Вы попадете на вкладку «Черновик», но заметите, что есть еще несколько вкладок вверху. На этих вкладках вы можете найти следующее:

  1. Руководство по стилю: некоторые основы редактирования кода, а также краткий справочник по общим переменным и предустановленным шрифтам.
  2. Base: этот код определяет базовый уровень стиля для вашего веб-сайта. Это то, что вы видите, когда используете «Базовую» тему, и все остальные темы основываются на ней. Вы можете найти все переменные, которые можно изменить, в базовом коде.
    3. Тема
  3. : этот код добавляет / изменяет базовый код для создания внешнего вида вашей темы.
    4. Стиль
  4. : этот код используется для создания цветовых вариаций, предусмотренных eCatholic для темы.
  5. Черновик: это область, которую вы можете редактировать.Пожалуйста, не копируйте и не вставляйте всю страницу кода с вкладок «Базовый», «Тема» или «Стиль» на вкладку «Черновик». Просто введите или скопируйте строки, которые вы действительно хотите изменить.

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

Несколько советов перед тем, как начать:
  • Если вы не знакомы с CSS, изменение более сложных частей кода может привести к нежелательным результатам, поэтому используйте только переменные для внесения изменений (за исключением кода, который мы даем вам ниже при добавлении новых шрифтов).. Переменные имеют формат @variableName. За большинством переменных будет следовать комментарий, объясняющий их назначение. Текст после «//» — это комментарий, который помогает объяснить назначение переменной, а также дает подсказку о том, как ее изменить. Например, эту переменную можно найти на вкладке «База»: @siteFont: Helvetica, Arial, sans-serif; // универсальный шрифт по умолчанию
  • В eCatholic мы считаем полезным использовать комментарии, чтобы отслеживать, кто и когда вносил изменения. Для этого нужно добавить «//» после строки кода и поместить предыдущую переменную вместе с нашими инициалами и датой внесения изменений: @siteFont: Helvetica, Arial, sans-serif; // нет 7-1-16 CR
При внесении изменений обратите внимание:
  • Сохранить — сохраняет ваши изменения как черновик, это НЕ публикует изменения
  • Preview — показывает, как сохраненные изменения выглядят на сайте
  • Загрузить файл — может использоваться для загрузки файлов, которые вы хотите включить, с помощью кода
  • Назад — возвращает в Студию дизайна без сохранения изменений.

Как внести изменения в CSS:

Вы можете найти многие из переменных ниже на вкладке «Руководство по стилю», но мы включили некоторые дополнительные переменные, с которыми наша группа поддержки столкнулась в качестве общих запросов на изменение переменных.Чтобы внести изменения, выполните следующие действия:

  1. Выделите и скопируйте код из Руководства по стилю, другой вкладки или из этой справочной статьи
  2. Вставьте код во вкладку «Черновик»
  3. Замените значение переменной тем, которое вы хотите использовать.
  4. Добавьте комментарий с помощью // после изменения переменной, чтобы записать любую мысль. Комментарии не влияют на CSS и являются необязательными, но помогают вспомнить, почему вы внесли это изменение.
  5. Сохранить. Это не повлияет на ваш сайт LIVE, только сайт в режиме черновика, который вы видите при входе в систему.
  6. Чтобы увидеть эффект от вашего изменения, вы можете затем нажать кнопку «Предварительный просмотр», чтобы просмотреть предварительный просмотр, открытый в новой вкладке.

Например, на изображении ниже заголовок шрифта модуля на всем сайте будет изменен с Helvetica на Scribere. Если вы используете специальный шрифт, например Scribere (см. Список шрифтов ниже), обязательно загрузите его!

Переменные изменения шрифта:

Следующие переменные помогут вам изменить шрифт на вашем сайте.

  • @siteFont — Шрифт, используемый через сайт
  • @siteNameFont — шрифт, используемый для названия сайта в заголовке
  • @pageTitleFont — шрифт заголовков страниц
  • @moduleTitleFont — шрифт заголовков модулей
  • @mainNavFont — семейство шрифтов навигации первого уровня
  • @mainNavSecondaryFont — семейство шрифтов навигации второго уровня (по умолчанию установлено @mainNavFont)
  • @sideNavFont — шрифт боковой навигации
  • @slideshowTitleFont — шрифт для заголовков слайдов
  • @slideshowCaptionFont — шрифт для подписей к слайдам

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

@loadFonts: «Font1», «Font2»;

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

  1. На вкладке «Черновик» щелкните треугольник в левом нижнем углу, чтобы развернуть эту нижнюю область. Используйте + Загрузить файл, чтобы загрузить файл шрифта. Если файл не загружается из-за несовместимости, используйте генератор шрифтов на сайте Font Squirrel, чтобы создать совместимый файл.Выберите вариант Оптимальный.
  2. Выберите ваш шрифт.
  3. Нажмите кнопку «Вставить», чтобы загрузить шрифт в тему. Теперь вы можете использовать этот шрифт в качестве переменной в своем стиле CSS.

Как всегда, если у вас возникнут трудности с внесением изменений в шрифт вашего сайта, свяжитесь с нашим отделом поддержки по телефону 877-932-1776 доб. 2 или [email protected] для получения помощи.

Как легко изменить шрифт в любой теме WordPress

Технология использования веб-шрифтов восходит к 90-м годам, но они не получили широкого распространения до 2010 года.До этого в WordPress можно было изменить шрифт, но это была сложная задача, и не каждый браузер мог с ней сотрудничать.

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

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

Все, что вам нужно сделать, чтобы изменить шрифт в WordPress, — это перейти в Google Fonts и выбрать шрифт вместе со стилями и наборами символов, которые, как вы думаете, вы могли бы использовать, отредактируйте файл functions.php, чтобы «поставить в очередь» (а?) таблицы стилей с wp_enqueue_style, ссылки на шрифты в файле CSS вашей темы и т. д. и т. д.

Хотя ручные методы использования веб-шрифтов жизнеспособны, зачем все это проходить? Самый простой способ контролировать размер шрифта (а также цвет и оформление) WordPress — это плагин Easy Google Fonts.

Возможность изменять шрифты в WordPress без единого ручного редактирования файла? Это сбывшаяся мечта настройщика тем.

Я поклонник всего, что упрощает управление веб-сайтом, и я думаю, что вы тоже. Итак, давайте попробуем плагин и посмотрим, что он будет делать.

Установка плагина Easy Google Fonts

Войдите в панель администратора WordPress.

В левом столбце навигации наведите указатель мыши на ссылку «Плагины» и щелкните ссылку «Добавить».

В поле «Искать плагины…» введите «Easy Google Fonts.”

После того, как вы найдете плагин, нажмите кнопку« Установить сейчас ».

Когда плагин будет установлен, нажмите кнопку «Активировать».

Использование Easy Google Fonts для изменения шрифтов в WordPress

В левом столбце навигации наведите указатель мыши на ссылку «Внешний вид» и щелкните ссылку «Настроить».

Это приведет вас в раздел настройки вашей темы. Элементы управления Easy Google Fonts находятся в разделе «Типографика».

Мы прерываем этот учебник на пару слов о шрифтах…

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

Если вы были на веб-сайте Google Fonts, вы могли заметить, что шрифты сгруппированы по категориям.

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

У Google есть отличная статья «Выбор веб-шрифтов: руководство для начинающих». Это стоит прочитать, если вы хотите изменить шрифт в WordPress, даже если вы не новичок, когда дело касается веб-шрифтов.

Помните, цель текста — передать идеи.Или продавайте товары, просвещайте людей земли — какой бы ни была ваша цель, внешний вид текста никогда не должен отвлекать от сообщения.

Хорошо, теперь я возвращаюсь к вашему регулярному обучению.

Использование веб-шрифтов в теме WordPress

Щелкните ссылку «Типография».

Щелкните ссылку «Типография по умолчанию».

Параметры настройки будут различаться в зависимости от темы, которую вы используете, но они всегда будут включать «Абзацы» и «Заголовок 1», «Заголовок 2» и т. Д.Параметр «Абзацы» контролирует большую часть текста на сайте. Различные заголовки по сути являются мини-заголовками по всему вашему контенту.

Я использую тему WordPress по умолчанию для этой демонстрации, и в этой теме заголовок сообщения — h3. Итак, чтобы изменить все заголовки сообщений на сайте, я нажимаю «Изменить шрифт» в разделе «Заголовок 2» и вношу изменения.

Мы подробно рассмотрим элементы управления через минуту, но чтобы показать, как быстро вы можете внести изменения, в разделе «Заголовок 2» я нажимаю «Семейство шрифтов» и выбираю из шрифтов Google в падать.

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

То же самое и со шрифтом абзаца. Просто нажмите «Абзац» и измените шрифт.

Если вас устраивают изменения, нажмите кнопку «Опубликовать».

Как вы могли заметить, у нас возникла небольшая проблема с изменением шрифта абзаца. Шрифт для списка в сообщении не изменился.

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

Easy Google Fonts Типографские параметры

При нажатии ссылки «Редактировать шрифт» становится доступно множество параметров. Они расположены на трех вкладках: «Стили», «Внешний вид» и «Позиционирование». Если вы знаете свой HTML и CSS, вы будете знать, что большинство из них делает. Но давайте все равно пройдемся по ним.

Вкладка «Стили»
  • Сценарий / подмножество
    Это различные варианты языковой кодировки. Для английского вам понадобится только «Latin», но в большинстве случаев я оставляю для этого параметра «All Subsets».”
  • Семейство шрифтов
    Это забавная часть, где вы выбираете между различными шрифтами Google. Помните, что вы также можете изменить это для каждого размера заголовка, поэтому вы можете легко изменить шрифт заголовка в WordPress с помощью этого параметра.
  • Толщина / стиль шрифта
    Управляет полужирным шрифтом и курсивом.
  • Оформление текста
    Подчеркивание, наложение или зачеркивание.
  • Преобразование текста
    Принудительно вводить весь текст в верхний, нижний или заглавные буквы (то есть каждое слово в каждом предложении пишется заглавными буквами).
Вкладка «Внешний вид»
  • Цвет шрифта
    Управляет цветом шрифта WordPress. Вы можете ввести шестнадцатеричное значение или выбрать цвет из палитры.
  • Цвет фона
    Как и в случае с цветом шрифта, здесь вы можете выбрать фон для текста абзаца или заголовка.
  • Размер шрифта
    Установите размер шрифта в пикселях. Было бы здорово, если бы вы могли переключить это на настройку em. Может быть, однажды они добавят эту опцию (привет, титановые темы!).
  • Высота строки
    Здесь вы определяете, сколько места должно быть между строками абзаца. Если вы потянете ползунок вверх, а затем вниз, вы можете получить немного настройки ниже «1», но в противном случае это только увеличит пространство. Этот параметр задается в значениях em, а не в пикселях.
  • Межбуквенный интервал
    Как и в случае с регулятором «Высота строки», вы можете потянуть ползунок вверх, а затем вниз, чтобы получить здесь отрицательное значение, если вы хотите, чтобы буквы были ближе друг к другу.
Вкладка «Позиционирование»
  • Поле
    Управляет пространством вокруг текста, добавляя пространство за пределами «поля» CSS, в котором находится текст.
  • Padding
    Управляет пространством вокруг текста, добавляя пространство внутри «рамки» текста CSS.
  • Граница
    Создает границу вокруг текста, индивидуально управляя верхней, правой, нижней и левой границами.
  • Радиус границы
    Используйте это, чтобы закруглить углы границы (ов).
  • Дисплей
    Блок или встроенный блок. Если вы не знаете, как блоки отображения работают в CSS, лучше оставить этот элемент управления в покое.

Как изменить шрифты в WordPress с помощью настраиваемых элементов управления шрифтами

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

    , упорядоченный список — это
      , блочные кавычки — это
      и тому подобное.

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

        ) отображается вне абзаца (

        ). Другие элементы появятся вне абзацев, например, вышеупомянутые цитаты из блоков и т. Д.

        Итак, чтобы текст в списке соответствовал тексту абзаца, в навигации в левом столбце наведите указатель мыши на ссылку «Настройки» и нажмите «Google Шрифты ».

        Введите «Имя элемента управления» (для этого я буду использовать «неупорядоченный список») и нажмите кнопку «Создать элемент управления шрифтом».

        В разделе «Добавить CSS-селекторы» введите HTML-тег (без скобок) для неупорядоченных списков: «ul.Затем нажмите кнопку «Сохранить элемент управления шрифтом».

        Теперь, когда мы вернемся к настройщику темы, вы увидите новый раздел «Типографика»: «Типографика темы».

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

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

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

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

        Размер текста WordPress и безжалостный марш к экранам мобильных устройств

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

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

        Как и надо.

        В течение некоторого времени преобладала точка зрения, что мобильный трафик в конечном итоге затмит трафик настольных компьютеров. Но на самом деле мобильный трафик, похоже, стабильно держится на уровне примерно 50% во всем мире (40% в США).

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

        Все это означает, что не бойтесь большего размера шрифта! Ваши мобильные пользователи будут вам благодарны.

        Не позволяйте шрифтам замедлять работу

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

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

        Вы вручную добавляли веб-шрифты на свой сайт? Считаете ли вы, что время загрузки страницы увеличивается при просмотре веб-шрифтов?

        Автор: Майкл Филлипс

        Майкл Филлипс — ветеран индустрии веб-хостинга, помогающий людям максимально использовать свое присутствие в Интернете с 1995 года.

        Как изменить семейство шрифтов, размер и цвет заголовка сайта и слогана в WordPress

        Если вы хотите изменить стиль шрифта, размер и цвет заголовка сайта и слогана («Просто еще один сайт WordPress»), вы можете сделать это с некоторыми модификациями CSS.Чтобы избежать потери этих изменений при обновлении WordPress или только конкретной темы, а также для более быстрого их выполнения, рекомендуется создать дочернюю тему конкретной темы и внести изменения в дочернюю тему. Если вы еще этого не сделали, ознакомьтесь с руководством по созданию дочерней темы в WordPress для получения дополнительной информации.

        Если у вас есть дочерняя тема, вы можете вставить изменения кода в файл style.css этой темы. Предполагая, что WordPress установлен непосредственно в папке public_html в вашей учетной записи хостинга WordPress, путь к файлу будет public_html / wp-content / themes / name-of-the-theme / style.css . Мы будем использовать в качестве примера тему Twenty Twelve, которая является одной из тем WordPress по умолчанию. Чтобы установить семейство шрифтов и размер заголовка сайта, вы можете вставить следующий код в файл style.css дочерней темы:

         .site-header h2 {
размер шрифта: 28 пикселей;
        семейство шрифтов: Courier, моноширинный;
}

        При этом размер шрифта будет установлен на 28 пикселей, а для семейства шрифтов — Courier . Обратите внимание, что мы также включили общее семейство, к которому принадлежит конкретное семейство шрифтов.В этом случае семейство шрифтов Courier и соответствующее родовое семейство, к которому оно принадлежит, — monospace . В этом нет необходимости; это из соображений совместимости. Если семейство шрифтов состоит из более чем одного слова, заключите его имя в кавычки (например, «Times New Roman»).

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

        .site-header h3 {
размер шрифта: 20 пикселей;
        семейство шрифтов: Verdana, без засечек;
        черный цвет;
}

        Как видите, мы изменили .site-header h2 на .site-header h3; это соответствующие классы для заголовка сайта и слогана в нашем примере темы. Конечно, мы также изменили значения для font-family, size и color. В приведенном выше примере размер установлен на 20 пикселей, семейство шрифтов — Verdana, а цвет — черный. Когда дело доходит до цвета, лучше использовать шестнадцатеричные значения (например,грамм. # D2B48C), чтобы вы могли установить оттенок основного цвета.

        Поскольку в большинстве тем заголовок сайта также является ссылкой на домашнюю страницу сайта, мы должны использовать другой класс для установки цвета заголовка сайта:

         .site-header h2 a {
        цвет: # D2B48C;
}

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

         .site-header h2 a: hover {
        черный цвет;
}

        В этом случае цвет изменится на черный при наведении указателя мыши на заголовок.В остальное время для цвета будет установлено значение HEX из предыдущего примера.

        Код для семейства, размера и цвета шрифта, заключенный в фигурные скобки, такой же. Вам нужно только изменить значения в соответствии с вашими потребностями. Однако часть, которая находится перед скобками, различается в зависимости от конкретной темы. Приведенные выше примеры будут работать с Twenty Twelve и многими другими темами. Существуют темы, которые используют разные идентификаторы или классы (часть перед фигурными скобками) для заголовка сайта и слогана.Например, есть темы, в которых вместо .site-header h2 и .site-header h3 используются # site-title и # site-description. У некоторых это может быть просто h2 и h3 соответственно. Третьи могут использовать #titles h2 и #titles h3 или что-то совершенно другое. Вы всегда можете проверить файл style.css исходной темы. Некоторые полезные инструменты, которые вы можете использовать для этого, — это встроенный инструмент разработчика браузера Google Chrome (просто щелкните правой кнопкой мыши по элементу на странице и выберите Проверить элемент ) и расширение Firebug для Mozilla Firefox. .

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

        Некоторые другие статьи об изменении заголовка, которые могут быть вам полезны:

        Как изменить размер шрифта веб-сайта в Google Chrome

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

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

        Связанные : Как отключить звук для всего веб-сайта в Chrome

        Изменение размера шрифта

        Зайдите в Google Chrome и откройте любой веб-сайт, размер шрифта которого вы хотите изменить.

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

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

        Теперь вы попадете на страницу со списком параметров, относящихся к способу взаимодействия браузера Chrome с веб-сайтами на вашем устройстве. На этой странице вы можете изменить различные параметры, касающиеся внешнего вида сайта, безопасности и многого другого. А пока перейдите в раздел в левом углу страницы под названием «Внешний вид».

        На странице отобразится список опций, относящихся к отображению веб-сайтов. Рядом с параметром Размер шрифта находится список параметров, из которых вы можете выбрать.Размер шрифта по умолчанию установлен как «Средний», но вы можете изменить его на «Очень маленький», «Маленький», «Большой» или «Очень большой».

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

        Эффект на сайте

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

        Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *