Как сменить шрифт в css
Перейти к содержимому

Как сменить шрифт в css

  • автор:

Как задать один Font-family всем элементам на странице?

Я пытался написать body < font-family:'нужное'; >, но не работает. На htmlbook написано, что font-family наследуется. Но у меня что — то не получается.

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 28 июн 2012 в 7:34
145 2 2 золотых знака 7 7 серебряных знаков 15 15 бронзовых знаков

Всё оказалось просто, в проекте был подключен reset.css, в нем для всех элементов было установлено font:inherit; я закомментировал эту строку и всё стало ок.

28 июн 2012 в 8:08

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

html, body

А вообще должен работать и ваш вариант.

Отслеживать
ответ дан 28 июн 2012 в 7:36
invincible invincible
1,900 12 12 серебряных знаков 13 13 бронзовых знаков
Пробовал, не помогает
28 июн 2012 в 7:41

И так и так пробовал, сейчас даже отдельно элементу попробовал установить font-family,всё равно не работает. Но самое интересное, что есть у меня класс .logo, так вот если ему задать : font-family:»Comic Sans MS»; например, то он изменит шрифт элемента с .logo Comic Sans MS

28 июн 2012 в 7:52

Всё оказалось просто, в проекте был подключен reset.css, в нем для всех элементов было установлено font:inherit; я закомментировал эту строку и всё стало ок.

Это делать не следовало. Устанавливая для всех элементов значение «inherit» для свойства «font» вы сможете наследовать установленный шрифт. Процедура такая:

  1. Устанавливаем для всех элементов inherit
  2. Ниже для body задаем нужное значение

Причина, по которой не получалось установить наследуемый шрифт в вашем случае, заключается в разном «весе» значения «font» и «font-family». В данном случае есть 2 решения:

1) В reset.css вместо

2) Не трогаем reset.css, но тогда в «body» задаем параметры так же для «font».

body < font:normal 12/14px Arial,Helvetica,Garuda,sans-serif; >

Предпочтительнее первый вариант, иначе в каждом элементе, где понадобится другой стиль, для шрифта нужно будет переопределять «font» целиком вместо «font-size» скажем или же использовать » !important «.

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

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

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

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

. и . — выделяют текст полужирным шрифтом.

. — выводит текст в верхнем индексе, например E = mc 2 .

. — выводит текст в нижнем индексе, например H2SO4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Использование тега SPAN  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это шрифт 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 в теге . А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Текст параграфа.

 

Текст параграфа.

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

 

Текст параграфа.

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

 

Текст параграфа.

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

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

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

Разделы сайта

  • Как сделать сайт
    Самому и бесплатно
  • Учебник HTML
    Для начинающих
  • Учебник CSS
    Для новичков
  • Справочники
    По HTML и CSS
  • Примеры
    HTML и CSS
  • Ссылки
    Полезные сайты для вебмастеров
  • Инструментарий
    Программы для создания сайтов

Как изменить шрифт текста с помощью свойтва CSS font-family.

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

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

Для решения этой задачи используется специальное свойство, которое называется

font-family

Синтаксис здесь следующий:

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

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

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

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

Самый большой приоритет среди указанного списка имеет шрифт, который указывается самым первым. Компьютер в первую очередь ищет именно его. Если этот шрифт не установлен на данном компьютере, то следующим ищется шрифт, который указан после запятой и.т.д. до того момента, пока не дойдем до одного из стандарных шрифтов: serif, sans-serif, cursive, fantasy или monospace.

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

Итак, давайте на конкретном примере посмотрим, каким образом можно использовать свойство font-family и менять шрифт текста какого-либо элемента.

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

Абзац 1

Абзац 2

Абзац 3

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

Абзац 1

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Как подключить шрифт через внешний файл CSS

Для подключения файлов через собственный CSS требуется опыт написания CSS кода и собственный сервер для хранения файла.

В первую очередь вам нужны файлы шрифта в формате WOFF
Получить их можно, купив шрифт, например, на myfonts.com. При покупке выбирайте лицензию «WEB» — для использования в интернете.

Разместите шрифтовые файлы в интернете
Для размещения файлов вы можете выбрать любой сервер или CDN-сервис. Главное, чтобы сервер поддерживал Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *)

Если вы размещаете файлы на своем сервере
Создайте в корне сайта файл .htaccess и пропишите этот код:

   Header set Access-Control-Allow-Origin "*"  

Создайте свой CSS-файл и также разместите его на своем сервере или в CDN сервисе.
Как создать CSS файл

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

@font-face <
font-family: ‘Gerbera’;
src: url(‘http://yoursite.com/gerbera/Gerbera-Medium.woff’) format(‘woff’);
font-weight: 400;
font-style: normal;
>
@font-face <
font-family: ‘Gerbera’;
src: url(‘http://yoursite.com/gerbera/Gerbera-Bold.woff’) format(‘woff’);
font-weight: 700;
font-style: bold;
>

Подробности написания CSS

Цифры 300,400. в свойстве font-weight означают насыщенность начертания шрифта. Вот полный список:
300 — light
400 — normal
500 — medium
600 — semibold
700 — bold

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

И наоборот. Если у вас нет файла с начертанием semi-bold (600). То укажите вместо него файл Bold. Таким образом полужирные заголовки будут отображаться не базовым начертанием для текста, а жирным.

Если файл шрифта у вас всего один, то можете указать его вообще для всех начертаний, перечислив их через запятую: 300,400,500,600,700

Вернитесь в Тильду. Настройки сайта → Шрифты и цвета → Загрузить шрифт → CSS файл. Поставьте ссылку на CSS файл (не на шрифты). Пропишите название шрифта так, как вы указали его в CSS файле.

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

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