Как изменить шрифт? Размер шрифта в браузере по умолчанию

Размер шрифта

Чтобы задать размер шрифта, можно использовать значения трех типов. Это абсолютные (допустим, пикселы или дюймы), относительные (скажем, проценты или em) и ключевые слова (например, x-small, small, large, xx-large). Все три способа имеют свои недостатки и преимущества. Джеффри Зельдман и другие специалисты по CSS рекомендуют использовать ключевые слова, вызывающие меньше всего проблем. Но так как ключевые слова требуют более глубоких познаний CSS, чтобы отображать шрифты одинаковыми во всех браузерах, и предлагают лишь ограниченный набор размеров, мы будем использовать em для указания размера шрифтов.

Отметим, что сначала em может показаться вам странной единицей. На самом деле данные единицы являются просто пропорциональным значением - можно относиться к ним как к десятичным процентам, когда 0,9 em - это то же самое, что и 90% от базового размера.

В большинстве браузеров по умолчанию используется размер 1 em (эквивалент примерно 16 пикселам), и если вы зададите размер шрифта в 1 em, он будет таким же, Если вы хотите, чтобы шрифт определенного элемента составлял три четверти от базового, задайте его равным 0,75 em, половину базового, - равным 0,5 em.

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

Вначале изменим селектор body:

<style type="text/css"> body {font-family: verdana, arial, sans-serif; font-size: 100%;}

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

Возможно, вы заметили, что размеры по умолчанию для распространенных элементов разметки, например h2-h6, p, ul и li, довольно крупные, и если нам требуется разместить на странице определенный объем текст, с этими размерами по умолчанию пользователю придется активно прокручивать ее вверх-вниз. Согласно маркетинговым исследованиям, прокрутка страниц нежелательна, кроме того, на наш взгляд такой большой размер шрифта лишь портит облик страницы.

В свою очередь, при использовании em можно по умолчанию задать чуть меньший размер шрифтов, ведь пользователи всегда могут его увеличить.

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

Теперь, когда 1 em равняется 12 пунктам, 0,75 em - это 9 пунктов и т.д.

Для тега html некоторые разработчики задают размер шрифта в 125% (20 пунктов), а размер шрифта элемента body - 50%. Таким образом, для всех дочерних элементов 1 em = 10 pt, 0,9 em = 9 pt, 1,2 em = 12 рt и т.д., что существенно облегчает подсчет размера.

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

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

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

Итак, отталкиваясь от 100-процентного значения свойства font-size, зададим размер шрифта для каждого элемента с помощью em. Мы поступим так-потому, что использования 100% вместо 1em позволяет получить более согласованный результат при просмотре страницы во всех браузерах. Тем не менее, чтобы указать размер шрифта для элементов, мы воспользуемся em как более удобной единицей.

Данная строка относится к заголовку третьего уровня hЗ, мы зададим для нее размер в .8em. Вот что мы напишем:

<style type="text/css"> body {font-family: verdana, arial, sans-serif; font-size: 100%;} h4 {font-size:.8em} </style>

Шрифт заголовка стал более мелким. (Экспериментальным путем мы определили, что его размер по умолчанию составлял 1,2 em или 16 х 1,2 = 19,2 pt). Теперь давайте зададим размер шрифта для остальных элементов разметки:

<style type="text/ess"> body {font-family: verdana, arial, sans-serif; fontsize:100%;} h2 {tont-size:1em} h4 {font-size:.8em} p {font-size:.8em} ol {font-size:.75em} ul {font-size:.75em} a {font-size:.7em} </style>

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

www.linkex.ru

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

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

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

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

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

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

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

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

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

пример для Windows

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1.

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

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

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

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

Шаг 2.

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

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

Стиль шрифта

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

Языки шрифта

Шаг 3.

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

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

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

Шаг 4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1zaicev.ru

» Как установить размер текста в CSS - XHTML.ru

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

Методика тестирования

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

Браузеры, с помощью которых проводилось тестирование: Safari 2, Firefox 2 и Opera 9.5α под Mac OS X Tiger, а также Internet Explorer 6 (IE6) и Internet Explorer 7 (IE7) под Windows XP с включенным ClearType. Разумеется это не полный список браузеров и операционных систем, но он охватывает большинство используемых пользователями сегодня.

Каждая операционная система и браузер запускались используя настройки по умолчанию. Каждый шаг теста позволяет увидеть, как каждый браузер показывает текст мелкого, среднего, крупного и крупнейшего размеров, а также масштабирование страницы на уровне: 90%, 100%, 110% и 120%, где это уместно.

Базовый вариант

Во-первых, необходимо убедиться в том, что браузеры находятся в состоянии, определенном на момент установки. Базовый вариант показывает, что в каждом браузере по умолчанию, когда стили не применяются (иные, чем установлены для браузера по умолчанию), размер текста 16px, и текст масштабируется повсеместно.

Размер шрифта в пикселях - шаг 1

Размер текста по умолчанию в базовом варианте является хорошей отправной точкой, но для большинства людей (дизайнеров, клиентов и их клиентов) 16px будет слишком крупным текстом. В нашем примере, текст был сокращен до 14px, а в боковой панели установлен в 12px. Первый шаг теста делает именно это, установив шрифты в пикселях:

В результате Safari и Firefox еще изменяют размер текста, а IE6 и IE7 нет. Текст может быть изменен в Opera и IE7 с использованием инструмента масштабирования страницы, который увеличивает макет страницы: текст и картинки.

Размеры текста в em - шаг 2.

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

Следующей попыткой будет привязка размеров текста к em. Em является единицей измерения, рекомендованной W3C. Отсчитывая от 16px по умолчанию, следующие стили должны дать желаемый размер текста:

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

Размер текста body в процентах.

А исправить ситуацию с искажением размера текста в IE6 и IE7 можно, используя проценты. Поэтому, оставив em при указании размеров текста в контенте, были протестированы следующие стили:

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

Настройка высоты строки в пикселях - шаг 4

В статье о веб-типографике "Setting Type on the Web to a Baseline Grid" (A List Apart, апрель 2007) подчеркивается, что хорошая типографика требует вертикальной сетки, то есть твердый вертикальный ритм, достигнутый с постоянной, взвешенной высотой строки - line-height. Ключевой момент заключается в постоянной высоте строки независимой от размера текста.

В нашем примере подходящая высота строки - line-height: 18px, что и добавляется для body следующим образом:

Результаты показывают, что высота строки 18px наследуется всем текстом на странице - текст в правой колонке привязан к той же вертикальной сетке, что и основной слева. Применение единиц измерения (в данном случае пикселей) при настройке высоты строки представляет ценность из-за наследования ее значения по всей странице. При использовании значения line-height: 18px без единиц измерения наследуется его множитель, что нарушает привязку строк к вертикальной сетке.

К сожалению, результаты показывают, что line-height: 18px не масштабируется в IE6 и IE7, при изменении размеров текста остается постоянной.

Настройка высоты строки в em - шаг 5

Когда с применением пикселей получилось, мы обратились к em. Повторение логики дает нам следующие стили:

Полученные результаты свидетельствуют о последовательно изменяющемся размере текста и высоте строки во всех браузерах. Прекрасно. Или почти так.

Проблема monospace в Safari - шаг 6

Если вы внимательно смотрели все примеры, то скорее всего заметили, что в Safari поведение моноширинного (monospaced) шрифта, включенного в основной текст непоследовательно. Для набора текста в пикселях, Safari делает размер моноширинного шрифта пропорциональным ширине текста вокруг него. Однако, когда размер указывается в em, Safari делает моноширинный текст намного меньше окружающего текста. Такая непоследовательность связана с тем, что в Safari по умолчанию размер текста 16px для "стандартных шрифтов" и 13px для "шрифтов фиксированной ширины". Safari 3α под OS X, по-видимому, не страдает от этой проблемы.

Можно решить, что проблемы моноширинного текста в Safari - это мелочь, с которой вы и ваши читатели могут жить, а также Safari 3 встроен OS X Leopard и последнее обновление Tiger, и проблема в скором времени практически исчезает. Для тех же, кого это сильно беспокоит и кто не может ждать, альтернативным решением является указать размер шрифта текста в пикселях для Safari.

Следующий код добавляет низкоуровневые условные комментарии к нашим стилям так, что пиксели указываются для всех браузерав кроме IE6 и IE7 (надо написать [if !IE], т.е. указать IE/Win игнорировать разметку ниже).

Результаты показывают - теперь нормально меняется размер текста и высота строки во всех браузерах, включая моноширинный текст в Safari2.

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

Заключение

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

Дополнение

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

Richard Rutter, How to Size Text in CSS.

xhtml.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<тег>...</тег>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<тег>...</тег>

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

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

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

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

Это шрифт 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> и примените атрибут к нему.

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

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

Этот размер шрифта составляет 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.

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

seodon.ru

Смотрите также

• 
  Как в браузере поменять домашнюю страницу
• 
  Скриншот всей страницы сайта яндекс браузер
• 
  Как убрать браузер по умолчанию андроид
• 
  Как открыть в браузере файл doc
• 
  Не закрывается яндекс браузер что делать
• 
  Где в браузере посмотреть загрузки в
• 
  Сочетание клавиш выделить все в браузере
• 
  Почему в браузере не воспроизводится музыка
• 
  Как почистить кэш браузера на айфоне
• 
  Как поменять пароль в яндекс браузере
• 
  Как с телефона удалить браузер гугл