3 способа задания параметров шрифта

Оформление текста: работа со шрифтом

Аннотация: Лекция посвящена вопросам оформления текста документа с использованием параметров шрифта. Дана характеристика основным параметрам шрифта и показаны способы их изменения. Обращено внимание на особенности использования некоторых шрифтов.

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

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

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

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

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

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

Бывает необходимо использовать верхние и нижние индексы.

К крупным заголовкам можно применять эффекты контура и тени.

Можно использовать и многие другие параметры шрифта.

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

увеличить изображение
Рис. 6.1. Неоформленный документ

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

По умолчанию в OpenOffice.org Writer при создании нового пустого документа принят шрифт Times New Roman размером 12 пт. При использовании других шаблонов по умолчанию может быть установлен другой шрифт.

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

В OpenOffice.org Writer есть несколько инструментов для изменения параметров шрифта.

Во-первых, это элементы панели инструментов Форматирование (рис. 6.3), позволяющие устанавливать основные параметры шрифта: Гарнитура, Кегль, Полужирный, Курсив, Подчеркнутый, Цвет текста, Выделение цветом (перечислены в порядке расположения на панели инструментов).

увеличить изображение
Рис. 6.3. Элементы панели Форматирование и команды контекстного меню, используемые при изменении параметров шрифта

В некоторых случаях при установке параметров шрифта бывает удобнее пользоваться командами контекстного меню, точнее, подчиненными меню этих команд: Гарнитура, Кегль, Эффекты, Регистр (см. рис. 6.3).

Для более тонких настроек параметров шрифта используют диалоговое окно Символы (рис. 6.4). Для отображения диалогового окна следует команду Символы выбрать в меню Формат или в контекстном меню.

увеличить изображение
Рис. 6.4. Диалоговое окно Символы

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

Источник: https://www.intuit.ru/studies/courses/667/523/lecture/11805

Способы установки размера шрифтов в CSS

Способы установки размера шрифтов в CSSВерсия для печати

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

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

Но ведь это же Веб: среда, где читатель может иметь такой же контроль, что и дизайнер — и результатом должно быть то, что текст в Веб, хотя и по воли дизайнера, должен быть гибок в различных браузерах и ОС.

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

Мы достигнем нашей цели традиционным методом проб и ошибок. Согласно новаторской работе Оуэна Бригса образца 2002-го года, я создал набор примеров для исследования, состоящий из 6 шагов и 161 скриншота. Ну так что, начнем?

Тестовый набор

Для тестирования использовалась разметка, состоящая из двух колонок — основной колонки слева и врезки справа. Был выбран шрифт 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. На первом шаге мы всего лишь задали размер текста в пикселях:

.bodytext p { font-size:14px;
} .sidenote { font-size:12px;
}

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

Размер текста в em — шаг 2

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

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

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

Следующая единица измерения шрифта — em. Em — это действительно типографская единица, рекомендуемая W3C и сравнимая по точности задания размера с ключевыми словами. Исходя из размера текста по умолчанию, мы можем придать тексту желаемые размеры:

.bodytext p { font-size:0.875em; /* 16×0.875=14 */
} .sidenote { font-size:0.75em; /* 16×0.75=12 */
}

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

Основной текст, указанный в процентах — шаг 3

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

body { font-size:100%;
} .bodytext p { font-size:0.875em;
} .sidenote { font-size:0.75em;
}

По результату видно, что различия между IE6, IE7 и остальными браузерами стали менее выраженными. Теперь все браузеры отображают и масштабируют текст одинаково.

Установка высоты строки в пикселях — шаг 4

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

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

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

Для нашего примера подходящая высота строки — 18px. Применим эти параметры к основному тексту:

body { font-size:100%; line-height:18px;
} .bodytext p { font-size:0.875em;
} .sidenote { font-size:0.75em;
}

По результату видно, что высота строки в 18px наследуется всеми элементами на странице — заметим также, что текст врезки имеет такую же высоту строки, что и текст основной колонки.

После определения единиц размера (в нашем случае px) для высоты строки, это значение наследуется всеми элементами страницы.

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

К сожалению, результаты говорят нам о том, что высота строки в 18px не масштабируется в IE6 и IE7, в то время как размер шрифта изменяется, и при увеличении масштаба — строки ужасно прижимаются друг к другу.

Установка высоты строки в em — шаг 5

Если с пикселями не не получилось — будем использовать em. Изменим высоту строки в наших стилях:

body { font-size:100%; line-height:1.125em; /* 16×1.125=18 */
} .bodytext p { font-size:0.875em;
} .sidenote { font-size:0.75em;
}

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

Проблема с моноширинными шрифтами в Safari — шаг 6

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

Если текст указан в em, то Safari отображает моноширинный текст намного меньше окружающего его текста. Различия появляются вследствие разного размера шрифта по умолчанию для пропорционального (16px) и моноширинного шрифта (13px).

В Safari 3a на OS X такой проблемы не существует.

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

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

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

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

Заключение

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

Указывая величину шрифта и высоту строки в em, с процентными значениями для элемента body (и с дополнительным условием для Safari) было показано, как придать тексту аккуратность и чёткость, при этом оставляя возможность его масштабирования.

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

Приложение

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

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

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

Статья основана на оригинальной статье online-журнала A List Arart «How to Size Text in CSS».

Источник: http://w3pro.ru/article/sposoby-ustanovki-razmera-shriftov-v-css

Создание своего сайта → Уроки html → Урок 3. Форматирование текстаДля форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие — редко (их и не надо запоминать). Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками





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

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.

Пример кода:В окне браузера это будет выглядеть так:

Теги разделения на абзацы и переноса строки

Тег
— тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.

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

, закрывающий тег не обязателен. В отличии от тега
абзацы отделяются друг от друга пустой строкой.

У тега

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

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.

Пример кода:В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом

Эти теги выделяют текст курсивом, но делают они это по разным причинам.

Теги используются для логического выделения названий книг, статей и цитат.

Теги используются для выделения определений.
Тегами и выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.

Пример кода:

В окне браузера это будет выглядеть так:

Теги, выделяющие текст полужирным шрифтом

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

Пример кода:

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием

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

Пример кода:

В окне браузера это будет выглядеть так:

Теги, выводящие текст моноширинным шрифтом

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

Пример кода:

В окне браузера это будет выглядеть так:

Теги, выводящие текст в верхнем и нижнем индексах

Теги выводят текст ниже уровня строки шрифтом меньшего размера.

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

Пример кода:

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги указывают параметры шрифта текста:

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

size — размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color — цвет текста (по умолчанию — черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color=»blue»).

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа «#». Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.

Пример кода:

В окне браузера это будет выглядеть так:

Тег center

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

Пример кода:

Совместное использование тегов

Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Понятнее будет на примере:

Выделим слово «текст» красным цветом:

Теперь добавим теги курсива (открывающий — слева, закрывающий — справа):
А теперь — теги полужирного начертания:

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

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

Предыдущий урок Вернуться в раздел Следующий урок 

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

Скачайте одним архивом видеоуроки HTML!

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

Источник: http://www.site-do.ru/html/html3.php

Работа с шрифтами. Задание размера, начертания и настройка отображения. Урок 8

Работа с шрифтами. Задание размера, начертания и настройка отображения. Урок 8

В этом уроке мне хотелось бы рассказать про шрифты более подробно. С базовыми CSS правилами, которые используются для оформления шрифтов, такими как font-family, color и font-size вы уже должны быть знакомы по предыдущим урокам. Сейчас мы будем рассматривать и остальные свойства.

font-weight

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

Пример использования:

font-weight: bold;  – полужирное начертание,

font-weight: normal; — начертание по умолчанию, то есть обычный текст.

text-decoration

Делает текст подчеркнутым, зачёркнутым или надчёркнутым.

Пример использования:

text-decoration: underline; — подчёркнутый текст.

text-decoration: overline; — надчёркнутый текст.

text-decoration: line-through; -зачёркнутый текст.

Семейство шрифтов

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

В него входят такие шрифты, как Verdana, Arial, TrebuchetMS иGeneva.

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

Семейство serif наоборот, относится к семейству с засечками. Включает в себя такие шрифты как TimesNewRoman и Geneva.

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

Семейство cursive – шрифты, к особенности которых можно отнести их начертание подобно рукописному тексту. Пример такого шрифта – ComicSans.

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

Мы уже знаем, что для задания того или иного шрифта используется свойство font-family, а через двоеточие название шрифта. Но можно часто встретить и такую запись:

font-family: Arial, Verdana, sans-serif;

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

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

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

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

Есть несколько единиц, с помощью которых мы можем задать размер шрифта.

px– размер шрифта в пикселях. Например:

body { font-size: 14px; }

Следует заметить что пробела перед px быть не должно. Так же обратите внимание, что я в данном примере использую технику наследования.

Задав тэгу body размерность шрифта, все нижележащие элементы (вложенные, если так понятнее), наследуют свойства элемента body — font-size.

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

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

Пусть мы для элемента body прописали размер шрифта 14px. Это собственно и есть наша база, кроме того, она будет наследоваться нижележащими элементами.

Такими как или h1. А теперь я хочу, чтобы к примеру заголовок первого уровня у меня был 28px, то есть в 2 раза больше.

Я могу указать это с помощью процентов вот так:

h1 { font-size: 200%; }

Тем самым я и ответил на вопрос «Процент от чего?». От наследуемого размера шрифта. А какое это преимущество даёт, можете спросить вы.

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

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

Ещё есть такая единица как em. Как и проценты, её так же можно отнести к относительной величине. По сути, она является коэффициентом. Если у body задана ширина, равная 14px, а заголовок первого уровня, мы хотим сделать равным 21px, то мы можем использовать следующее правило: 

h1 { font-size: 1.5em; }

em и проценты, это в принципе взаимозаменяемые вещи. Так что можно использовать то, что больше всего вам придётся по вкусу. 

Альтернативный способ задания размера шрифта

Так же можно встретить запись, где в качестве значения font-sizeмогут фигурировать различные слова. Такие как: 

small, x-small, xx-small, medium, large, x-large, xx-large

А в стилях может быть прописано следующее правило:

font-size: medium;

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

В тэге body, с помощью font-size: medium мы как бы предполагаем, что на страничке все шрифты должны быть среднего размера.

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

small-это примерно меньше на 20% от small.
large-наоборот на 20% больше от large.

Но откровенно говоря, я почти нигде не видел чтобы кто-то задавал шрифт подобным образом. 

Наклонное начертание

Задаётся с помощью свойства:

font-style: italic;

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

Похожий эффект можно достичь с помощью:

font-style: oblique;

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

Социальные кнопки для Joomla

Источник: http://xn--d1accuej1b.xn--p1ai/obuchenie-html/31-urok-8-rabota-s-shriftami-zadanie-razmera-nachertaniya-i-nastrojka-otobrazheniya

Способы задания шрифтов в CSS

Шрифт – это важная составляющая веб-дизайна, придающая сайту узнаваемость и выразительность.

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

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family.

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif).

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

Список шрифтов может выглядеть следующим образом:

h1 {font-family: verdana, trebuchet, sans-serif;} h2 {font-family: “Garamond”, serif;}

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

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

Атрибут font style может принимать такие значения как:

  • normal (обычный);
  • italic (курсив);
  • oblique (наклонный).

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

Вариант шрифта

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

Свойство font variant может иметь одно из двух возможных значений:

  • normal (обыкновенный шрифт);
  • small-caps (шрифт с малыми прописными буквами).

Вес шрифта

В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight. Некоторыми браузерами поддерживаются числовые значения в описании веса.

Каждый шрифт может принимать следующие значения:

  • normal (обычный);
  • lighter (светлее);
  • bold (жирный);
  • bolder (ещё более жирный);
  • 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

Например:

p {font-family: georgia, garamond serif;} td {font-family: georgia, garamond serif; font-weight: bold;}

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

Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.

Например, задание шрифта размером 20 пикселей выглядит таким образом:

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

Например, шрифт с параметрами:

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

  • color (цвет текста);
  • background color (цвет фона текста).

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

Например, белый текст на чёрном фоне будет иметь такие значения:

  • color: #ffffff;
  • background-color: #000000.

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно «придумать» значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000.

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

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

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

Надеемся, что данное руководство было для вас полезно. Желаем успехов!

Источник: http://www.internet-technologies.ru/articles/sposoby-zadaniya-shriftov-v-css.html

«Работа со шрифтами»

«Работа со шрифтами»

ГБОУ НПОПРОФЕССИОНАЛЬНОЕ УЧИЛИЩЕ №31

МЕТОДИЧЕСКАЯ РАЗРАБОТКА

ОТКРЫТОГО УРОКА ПО ПРЕДМЕТУ ИНФОРМАТИКА И ИКТ

ТЕМА: «Работа со шрифтами»

Преподаватель: Колодезная Н.Ю.

п. Редкино

2014 г.

Тема урока: Работа со шрифтами.

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

  1. Компьютеры.
  2. Средства мультимедиа.
  3. Карточки-задания.
  4. Вопросы для взаимоконтроля.

Ход урока

Организационная частьПроверка наличия учащихся по списку

Вводный инструктаж

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

.Вопросы:

Вопрос 1.

Форматирование текста это –

Ответ: изменение внешнего вида символов и абзацев.

Вопрос 2 Основные операции с фрагментами теста –

Ответ: редактирование, форматирование, удаление, выделение, перемещение, копирование.

Вопрос 3.Абзац это –

Ответ: любая последовательность символов, замкнутая символом Возврат каретки – Enter.

Вопрос 4. Способы форматирования символов–

Ответ: Ответ: меню ФОРМАТШРИФТ, ФОРМАТСТИЛЬ, кнопки панели ФОРМАТИРОВАНИЯ, ФОРМАТНАЯ КИСТЬ, контекстное меню ШРИФТ.

Вопрос 5. Назначение панели инструментов «Форматирование» –

Ответ: Устанавливать названия шрифта, размер шрифта и начертания символов.

Вопрос 6. Виды форматирования –

Ответ: форматирование символов, форматирование абзацев, форматирование документа в целом.

Обсуждаются и исправляются ошибки, если они были допущены при ответах на вопросы.

Организация рабочего места оператора.

(с объяснением и показом работы мастером)

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

1

1.Напечатать следующий текст с учетом шрифтового оформления (размер–12 пунктов) и оформления абзаца.

Информатика – это совокупность дисциплин, изучающих свойства информации, а также способы представления, накопления, обработки и передачи информации с помощью технических средств. Ядро информатики – информационная технология как совокупность технических и программных средств, с помощью которых мы выполняем разные операции по обработке информации во всех сферах нашей жизнедеятельности.Центральное место в прикладной информатике занимает компьютер (от английского слова comput – вычислять) – техническое устройство для обработки информации. У нас в стране его часто называют электронно-вычислительной машиной (ЭВМ). Мы рассматриваем наиболее распространенный тип ЭВМ – персональный компьютер (ПК).

2.Выделите слово «Информатика» и замените шрифт на полужирный.

3.Выделите определение информатики и замените шрифт на курсив.

4.Выделите слова «Ядро информатики», замените шрифт на полужирный и измените размер шрифта (14 пунктов).

5.Выделите определение ядра информатики, замените шрифт на курсив с подчеркиванием и измените размер шрифта (14 пунктов).

6.Выделите пояснение в скобках «от английского слова comput – вычислять» и замените шрифт на полужирный курсив.

7.Выделите слово «ПК» и замените шрифт на полужирный, интервал разряженный на 2 пт.

Вопросы для взаимоконтроля.

Ответ: 1) установить нужные параметры шрифта и затем производить набор текста.2) набрать весь текст, а затем произвести изменение шрифта в различных фрагментах текста.
Ответ: выделить фрагмент.

Вопрос 3. Какие способы форматирования использованы в задании №1?

Ответ: меню ФОРМАТШРИФТ, кнопки панели ФОРМАТИРОВАНИЯ.

Вопрос 4. Какой из способов форматирования символов более универсальный?

Ответ: меню ФОРМАТШРИФТ.

Вопрос 5. На вкладке Интервал можно изменить:

Ответ: — расстояние между символами (разряженный или уплотненный текст);

  • смещение символов относительно базовой линии;
  • ширину символов.

2

2.Привести текст в соответствие со следующим образцом:

Выдано Никитиной Светлане в том, что в период с 1.09.98

Источник: http://moyamatem.ru/rabota-so-shriftami/index.html

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

Давайте по порядку разберемся с заданием каждого параметра шрифта. Первым и наиболее важным параметром для любого шрифта является его размер. Размер шрифта в CSS задается параметром font-size. Этот параметр может задаваться несколькими способами.

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

Например: P { font-size: 15pt; } B { font-size: 15; } В данном примере оба элемента будут отображаться размером в 15 пикселов.

Как Вы знаете браузер имеет внутри таблицу стандартных размеров шрифтов, т.е. тех размеров, которые задаются атрибутом size в теге .

Для установки этих семи стандартных значений можно пользоваться встроенными названиями. Их как раз тоже семь: xx-small, x-small, small, medium, large, x-large, xx-large.

Наверно понятно, что xx-small соответсвует размеру 1, а xx-large самому большому 7.

Вторым способом задания размера является относительный размер. Для увеличения размера используется значение larger, а для уменьшения smaller. Эти выражения имеют такой же смысл, как и стандартные способы задания размера шрифта size=+1 или size=-1.

Естественно, что в данном случае Вы будете иметь только семь значений размера шрифта. Если Вы хотите получить иной более точный размер, то его можно задать в процентой форме или с добавлением к числовому выражению суффикса em или ex: P { font-size: xx-large; } P { font-size: 1.

5em; } P { font-size: 150%; } P { font-size: 3ex; } Обратите внимание, что суффиксы em и ex имеют разные результаты. Суффикс em действует от текущего размера шрифта, а размер заданный через ex считается относительным от единичного размера шрифта, т.е. от size=1.

Поэтому не путайте буквы 🙂

Следующим характерным для шрифта параметром является его жирность или если по умному, то вес 🙂 Задается вес параметром font-weight. Для него существует 9 стандартных значений жирности от 100 до 900, т.е. 100, 200, 300… Некоторым из этих значений присвоены свои имена.

Например шрифт с нормальным весом 400 может обозначаться словом normal, и соответственно жирный весом в 700 через bold. Также здесь, как и везде, характерен способ задания относительной жирности.

Чтобы повысить жирность шрифта используется слово bolder, а для понижения lighter.

Какой параметр шрифта после всего этого нам надо будет задать ? Конечно же его стиль начертания или по научному гарнитуру. Задается параметром font-family. Значением этого параметра может служить точное название выбранного вами шрифта, например, Times New Roman или Arial.

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

Для обозначения этих семейств ввели несколько стандартных значений: serif, sans-serif, cursive, fantasy, monospace. При подборе шрифта пробуйте пользоваться названиями этих семейств. P { font-family: «Times New Roman», serif; }<\p>

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

Поэтому для этого существует параметр font-style, который может иметь два значения normal и italic или oblique. Последние два значения для браузера считаются идентичными.

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

Так вот, чтобы сказать браузеру о такой своей прихоти Вы можете использовать параметр font-variant со значением small-caps.

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

А теперь, как уже многие могли догадываться, существует способ задания всех этих параметров шрифта разом. Это обеспечивает параметр font и в нем задаются все выше перечисленные параметры шрифта через пробел в любой последовательности: P { font: bold italic x-large Arial, serif } P { font: normal small-caps 120% fantasy }<\p>

Источник: http://helpsite.narod.ru/web/html/24.htm

Ссылка на основную публикацию