Что такое код i курсив


Содержание

Основы HTML. Выделение текста курсивом, полужирным. Создание списков. Имена файлов

Продолжаю серию постов для начинающих освоение HTML.

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

Кроме этого – несколько важных правил относительно имён файлов, размещаемых на хостинге.

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

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

Тег даёт команду браузеру вывести текст — курсивом.

Надо сказать, что оба этих тега называются логическими, и их назначение – именно логическое выделение участка текста.

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

В HTML5 вернули, ранее считавшиеся устаревшими, теги физического форматирования – от слова bold (“полужирный”) и тег от слова italica (“курсив”). Но я по-прежнему рекомендую их не использовать, а отдать предпочтение и .

Маркированный и нумерованный списки

В таблице ниже, вы увидите, что начало маркированного списка задаёт тег , а начало нумерованного списка – тег .

Каждый пункт списка находится в теге .

Маркированный список (не упорядоченный)
ВЕБ мастер должен освоить:

Нумерованный список (упорядоченный)

Для создания успешного блога нужно:

  1. купить домен
  2. хостинг
  3. установить WordPress
  4. написать статьи

Внутри OL и UL нельзя будет размещать ничего, кроме элементов LI, но в самих пунктах списка (LI) могут быть вложены, например, ссылки.

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

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

Атрибуты HTML тегов

Ещё можно встретить в HTML-коде такие конструкции:

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

В наступающем Новом Году HTML5, НЕ рекомендуется использовать атрибуты тегов. Для этой цели, теперь нужно использовать возможности CSS3 (Каскадные таблицы стилей).

С помощью CSS3 можно поменять не только вид маркеров (это может быть любой символ, который есть в шрифте), но и тип символов нумерации в нумерованных списках. Это могут быть, например, римские цифры или буквы латинского алфавита (A, B, C, D…).

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

Тег переноса строки и создания горизонтальной линии

Для принудительного переноса текста на следующую строку (без создания нового абзаца) служит тег
.

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

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

Эта линия будет занимать 30% от ширины родительского элемента.

Примерно так…
Посмотрите презентацию на тему «Основы HTML». В ней рассказ о уже известных вам, базовых тегах HTML.

Важные правила при задании имени файла

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

  1. Не используйте русских букв, в именах могут быть только латинские буквы и цифры,
  2. Не используйте пробелы. Их можно заменить на символ_нижнего_подчеркивания. Хотя, часто слова в имени файла пишут слитно.
  3. Не используйте специальные символы, типа: “№;%:?*()”@! Можно использовать только нижнее подчёркивание и точку (хотя лучше один раз – перед расширением).
  4. Желательно называть имена и каталоги буквами только в нижнем регистре (т.е. маленькими буквами).

Вот и все правила – три “золотых” и одно “серебряное”.

Продолжение сериала…

В следующей статье поговорим о вставке изображений в HTML – страницу. Тег IMG и его атрибуты.

Я с октября начинаю вести обновлённый курс по HTML5 и CSS3 в Санкт-Петербурге. Обучаю я…

Обновлено! Вебинар состоялся! Сервис вполне работает. Следите за анонсами новых вебинаров на этом блоге. Я…

Эта статья целиком посвящается тегу IMG (англ. image — изображение) и его атрибутам. Вставка картинки…

BB-коды

ul»>Помощь

[B], [I], [U], [S] — полужирный, курсив, подчёркивание и зачёркивание

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

Пример: Это [B]полужирный[/B] текст.
Это текст [I]курсивом[/I].
Это [U]подчёркнутый[/U] текст.
Это [S]перечёркнутый[/S] текст. Вывод: Это полужирный текст.
Это текст курсивом.
Это подчёркнутый текст.
Это перечёркнутый текст.

[COLOR= цвет ], [FONT= имя ], [SIZE= размер ] — цвет текста, шрифт и размер

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

Пример: Это [COLOR=red]красный[/COLOR] и [COLOR=#0000cc]синий[/COLOR] текст.
Это текст шрифтом [FONT=Courier New]Courier New[/FONT].
Это [SIZE=1]маленький[/SIZE] и [SIZE=7]большой[/SIZE] текст. Вывод: Это красный и синий текст.
Это текст шрифтом Courier New .
Это маленький и большой текст.

[URL], [EMAIL] — ссылки

Создаёт ссылку из выделенного текста.

[URL= ссылка ], [EMAIL= адрес ] — ссылки (дополнительно)

Делает выделенный текст ссылкой на интернет-страницу или на адрес электронной почты.


Пример: [URL=http://www.example.com]Ссылка на example.com[/URL]
[EMAIL=example@example.com]Моя почта[/EMAIL] Вывод: Ссылка на example.com
Моя почта

[USER= ID ] — ссылка на профиль

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

Пример: [USER=1]Имя пользователя[/USER] Вывод: Имя пользователя

[IMG] — изображения

Показывает изображение, используя выделенный текст как URL.

Пример: [IMG]https://azbyka.ru/forum/​styles/default​/xenforo/avatars/avatar_s.png[/IMG] Вывод:

[MEDIA= сайт ] — вставка медиа-файлов

Вставляет в сообщение медиа с разрешенных сайтов. Рекомендуется использовать кнопку добавления медиа в панели инструментов редактора. Одобренные сайты: Dailymotion; Facebook; Liveleak; Metacafe; Vimeo; YouTube;

Пример: [MEDIA=youtube]oHg5SJYRHA0[/MEDIA] Вывод: Встроенный YouTube плеер появится здесь.

[LIST] — список

Отображает нумерованный или маркированный список.

Пример: [LIST]
[*]Маркер 1
[*]Маркер 2
[/LIST]
[LIST=1]
[*]Запись 1
[*]Запись 2
[/LIST] Вывод:

  • Маркер 1
  • Маркер 2
  1. Запись 1
  2. Запись 2

[LEFT], [CENTER], [RIGHT] — выравнивание текста

Изменяет выравнивание выделенного текста.

Пример: [LEFT]По левому краю[/LEFT]
[CENTER]По центру[/CENTER]
[RIGHT]По правому краю[/RIGHT] Вывод:

[QUOTE] — цитата текста

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

Пример: [QUOTE]Процитированный текст[/QUOTE]
[QUOTE=Пользователь]Что-то сказал[/QUOTE] Вывод:

[SPOILER] — текст, содержащий спойлеры

Скрывает текст, который может содержать спойлеры (преждевременно раскрытая важная сюжетная информация). Чтобы увидеть текст, нужно нажать кнопку спойлера.

Пример: [SPOILER]Простой спойлер[/SPOILER]
[SPOILER=Заголовок спойлера]Спойлер с заголовком[/SPOILER] Вывод:

[CODE], [PHP], [HTML] — вставка программного кода

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

Пример: [CODE]Основной
код[/CODE]
[PHP]echo $hello . ‘world’;[/PHP] Вывод:

[INDENT] — отступ текста

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

Пример: Обычный текст
[INDENT]Небольшой отступ
[INDENT]Значительный отступ[/INDENT]
[/INDENT] Вывод: Обычный текст

[PLAIN] — обычный текст

Отключает распознавание BB-кодов внутри выделенного текста.

Пример: [PLAIN]Это не [B]полужирный[/B] текст.[/PLAIN] Вывод: Это не [B]полужирный[/B] текст.

[ATTACH] — вставка вложений

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

Пример: Миниатюра: [ATTACH]123[/ATTACH]
Полный размер: [ATTACH=full]123[/ATTACH] Вывод: Содержание вложений появится здесь.

[ANAME= option ] — Место перехода

Соответствует тегу a в html

Пример: [aname=aname]Переход сюда[/aname] Вывод: Переход сюда

[FLOAT_LEFT] — Обтекание

Пример: [FLOAT_LEFT]This content is floated left.
Adjacent text will wrap
around it.[/FLOAT_LEFT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam. Вывод: This content is floated left.
Adjacent text will wrap
around it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam.

[FLOAT_RIGHT] — float_right

Float content right, enabling text to wrap around it.

Пример: [FLOAT_RIGHT]This content is floated right.
Adjacent text will wrap
around it.[/FLOAT_RIGHT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam. Вывод: This content is floated right.
Adjacent text will wrap
around it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam.

BB-код для вставки медиа в сообщения из XenForo Media Gallery.

Пример: [GALLERY=media, X]Gallery BB Code[/GALLERY] Вывод: [GALLERY=media, X]Gallery BB Code[/GALLERY]

[IMAGE= option ] — Картинка

Пример: [image=300]//azbyka.ru/forum/data/xengallery/19/19379-903c84e74bdb3b4f9485c13fe90eb169.jpg?0[/image] Вывод:

[JUMPTO= option ] — Переход на

Переход на другое место сообщения

Пример: [jumpto=aname]Переход на другое место сообщения[/jumpto] Вывод: Переход на другое место сообщения


Тег HTML курсив

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

HTML тег относится к тегам физического форматирования. Изменение начертания шрифта с помощью тега носит стилистический характер.

Спецификация HTML5 рекомендует отдавать приоритет тегам логического форматирования: важные фрагменты текста — тег , акцентирование внимания — тег , подзаголовки — теги

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Жирный шрифт и курсив CSS

Чтобы сделать шрифт жирным в CSS либо задать ему курсивное начертание, вам пригодятся такие свойства, как font-weight и font-style . Ниже мы разберемся, какие значения могут быть использованы для этих свойств.

Жирный шрифт в CSS: свойство font-weight

Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight :

bold Полужирный шрифт
normal Обычный шрифт
bolder Более жирный шрифт, чем у родителя
lighter Менее жирный шрифт, чем у родителя
inherit Наследует значение родителя
Числовое значение от 100 до 900 От очень тонкого до очень жирного шрифта

Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 и 900 , настраивая жирность шрифта от самого тонкого до самого плотного.

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

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства font-style :

italic Курсивный шрифт
oblique Наклонный шрифт
normal Обычный шрифт
inherit Наследует значение родителя

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

Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

Начертание текста

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

Жирное начертание реализуется с помощью одного из двух тегов: b или strong . Различие данных тегов в современных браузерах размыто. Изначально предполагалось, что тег b будет использоваться только для физического выделения слова или фразы, а strong для логического выделения. Все популярные современные браузеры обрабатывают оба тега одинаково, а существенного влияния на обработку поисковыми сервисами (google, yandex) у данных тегов нет.

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

Code Basics — курсы по программированию.

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

С курсивным начертанием ситуация такая же, как и с жирным начертанием — существуют два тега i и em . Тег i служит для физической разметки слова или фразы, а тег em для логической разметки.

Задание

Добавьте в редактор фразу

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

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

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

kakras

kakras

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

Юникод Шрифты (Unicode UTF-fonts) и специальные символы HTML / XHTML

В языке HTML применяются два способа вывода спецсимволов: по номеру в таблице (десятеричному или шестнадцатеричному) или с помощью мнемонического имени символа ( Escape-последовательности из символьных элементов, ссылки-мнемоники, например, греческая буква альфа — α )

Так можно напечатать типографские символы, отсутствующие на компьютерной клавиатуре, например:
§ — значёк «параграф», его 16-ный код (U+00A7, HTMLкод § мнемоника §) находится слева снизу в таблице символов операционной системы Windows (рисунок 1), а десятичный — показан справа и равен 167. В окне текстового редактора его можно набрать комбинацией клавиш Alt + 0167 (добавляя ноль, цифрами в правой цифровой панели; в ноутбуке — с нажатой спец.кнопкой Fn или включив NumLk). Знак будет показан и без «плюса». На калькуляторе ПК, переключив его в инженерный вид, есть возможность пересчитать коды из шестнадцатеричного в десятеричный и обратно (набрав число и переключив на другую систему счисления — Hex/Dec). Мнемоники чувствительны к регистру и должны всегда указываться в нижнем регистре клавиатуры.

// В таблице символов, если включить там «дополнительные параметры просмотра» — можно воспользоваться режимом поиска, введя в окошке П о и с к буквальное название (одно слово) значка, например: «Sun» или «Su» (то есть, солнце, фигура в виде круга с лучами или с точкой посередине). Для поиска знаков с двумя точками сверху (с умляутом / диерезой) — поисковый ключ «dia», с угловой скобкой наверху (с циркумфлексом) — «circu». В итоге, программа найдёт, по фильтру, все подходящие к запросу символы.

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

Примеры значков и спецсимволов, получаемых с помощью комбинации клавиш Альт + число (с правой панели цифр) и копированием из таблицы символов:

— широкое тире, Alt+0151.

– узкое n-тире, Alt+0150.

Alt+1 = ☺ Alt+2 = ☻ Alt+3 = ♥ Alt+7 = • Alt+15 = ☼

‮ ‬ — открывающий и закрывающий спецсимволы для переворачивания (посимвольного) текста html-страницы с прямого в обратный порядок (эффект зеркального отражения, инверсия в пределах параграфа). ‫ — переставляет целиком слова, наоборот.

« » левая и правая типографская кавычка-ёлочка, Alt+0171 (ссылка-мнемоника — «) и Alt+0187 (»).

́ — значёк «главное ударение». Ставится перед «ударной» буквой. Можно выбрать, скопировать из «Таблицы символов» (шестнадцатеричный код U+0301, HTMLкод ́ или ́ — после буквы) и вставить в нужную позицию в окне текстового редактора или в окошке для создания сообщения в любой социальной сети (в livejournal.com надо переключиться, с помощью угловой кнопки, в режим HTML). Прим́ер – Прим́ер.
Знак & (амперсанд) — обязательно ставится перед кодом. Текстовый файл сохраняется в кодировке UTF-8 / Юникод.

Путь в интерфейсе Виндовс: Пуск -> Все программы -> Стандартные -> Служебные -> Таблица символов.

Ударные гласные:
á — á
Á — Á
é — é
É — É
ó — ó
Ó — Ó
ú — ú
ý — ý

Эти символы можно копировать прямо из строчки:
.Знак инь-янь ☯
.Колесо дхармы ☸
.Символы гороскопа ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓
.Против войны в мире ☮
.Серп и молот ☭
.Стрелки и указатели (влево и вправо) ➢ ➔ ➜ ➟
.Череп и кости, как на пиратском флаге ☠
.Звёзды, снежинки и солнце с лучами ✦ ✯ ☆ ✡ ✱ ✶ ★ ✰ ✪ ✭ ✮ ❄ ❅ ❆ ❂ ☀ ☼
.Шахматные фигуры ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟
.Погодные символы (солнце, облако, зонтик, снег): ☀ ☁ ☂ ☃
.Валюта (знак евро, доллара, фунта и цента) € $ £ ¢
.Закрашенный телефон ☎
.Виктория ✌
.Короны ♔ ♕ ♚ ♛

Интернет-страницы в кодировке UTF-8 — сохраняются без метки порядка байтов (BOM, byte order mark). Перекодировать можно с помощью текстового редактора notepad++. Обычный «блокнот» для этих целей не подходит.

Если основная кодировка сайта (или отдельного каталога) — windows-1251, но для отдельных страниц нужен именно Юникод, то в файле .htaccess им персонально назначается нужный charset с помощью директивы :

AddDefaultCharset windows-1251 # дефаултная кодировка в каталоге и его подкаталогах.

AddCharset UTF-8 .html # переопределение кодировки

Информация из HTTP-заголовков (задаваемая с помощью .htaccess или «php header») — приоритетнее чем метатеги , но при их несовпадении, чтобы прочитать текст вэб-страницы, может потребоваться вручную переключить кодировку в настройках браузера.

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

Коды в стандарте Юникод разделены на несколько блоков (наборов, областей, секций).
Полные списки:
http://www.fileformat.info/info/unicode/block/index.htm


Часть кодов зарезервирована для использования в будущем.

В новых стандартах кодирования символов, для совместимости со старыми 16-битными системами — первые 65 536 позиций идентичны им, за исключением интервала U+D800 — U+DFFF.
В UTF-16 можно отобразить, максимально — 1 112 064 символов (диапазон кодов — 0x000000-0x10FFFF). В навороченных фонтах, содержащих много заполненных секций, это сказывается на размере файла шрифта, который может превышать и двадцать и тридцать мегабайт занимаемого дискового пространства, что сильно замедляет работу компьютерных программ и мобильных приложений.

Последняя действующая версия, на данный момент (2014-й год) — список шрифтов в стандарте Unicode 7.0
http://www.unicode.org/versions/latest/ (официальный сайт Консорциума Юникода).

Различные кодировки символов — переключаются в настройках Интернет-браузеров и компьютерных программ. Для кириллицы: в почте используется KOI8-Р, в HTML-коде интернет страниц — Windows-1251 или UTF-8.

-они должны соответствовать тегу «charset» в заголовке HTTP, передаваемом сервером.

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

Сводная таблица специальных символов HTML

Значёк можно выделить и скопировать спец. символ прямо с этой таблицы (из левой колонки).
После кода ставится точка с запятой.

Описание, дополнительная информация, примеры неразрывный пробел (исключает перенос слов и символов, между которыми он стоит). узкий пробел. Пример: «Дело было в Интернет’е». обычный пробел (шириной в букву n). широкий пробел (em-шириной в букву m). Пример: «Дело было в Интернет’е» — — минус, дефис – – – узкое тире (en-тире) — — — широкое тире (em-тирэ) ­ ­ ­ мягкий перенос (место возможного переноса). В рабочей области браузера отображается в виде дефиса, только при переносе на следующую строку части слова после символа «мягкого переноса»). Рекомендуется заключать слова, содержащие дефисы, в тег nobr (запрет автоматического перехода текста на новую строку). а́ ́ главное ударение («акут», его рисуют /-образно). Код ставится перед «ударной» буквой) ‘ ‘ апостроф (надстрочная запятая). Пример: «Дело было в Интернет’е» . … … … Alt+0143 многоточие… ‾ ‾ ‾ надчеркивание. При‾мер ´ ´ ´ знак главного ударе´ния («акут», его рисуют /-образно)

Знаки валют € € € Евро (Euro) $ $ Доллар (Dollar) ¢ ¢ ¢ Цент £ £ £ Фунт ¤ ¤t; ¤ Знак валюты. ¥ ¥ ¥ Знак йены и юаня ƒ ƒ ƒ Знак флорина

Приоритетный список имён семейства шрифтов (font-family, гарнитуры) — эквивалентные фонты, похожие по основным параметрам. Правильный подбор обеспечивает одинаковое отображение в разных операционных системах (Windows, Mac OS, Unix/Linux), не зависимо от их версии (и в старых и в новых релизах) и на различных устройствах.

Пример универсальных значений (наборов, включающих в себя «приоритетный список имён семейства шрифтов», поддерживающих кириллицу и/или «названия родовых семейств») для at-правила @font-face или дескриптора font-family:

Arial, Helvetica, sans-serif, «Nimbus Sans L»
«Arial Black», Gadget, sans-serif
«Comic Sans MS», cursive
«Courier New», Courier, monospace
Georgia, serif, «Century Schoolbook L»
Impact,Charcoal, sans-serif
«Lucida Console», Monaco, «Nimbus Mono L», monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serif
Tahoma, Geneva, sans-serif
«Times New Roman», Times, serif, «Nimbus Roman No9 L» — гарнитура «Таймс»
«Trebuchet MS», Helvetica, sans-serif
Verdana, Geneva, sans-serif, «DejaVu Sans»
Symbol
Webdings
Wingdings, «Zapf Dingbats»
«MS Sans Serif», Geneva, sans-serif
«MS Serif», «New York», serif

Родовые (общие) семейства / категории, гарнитуры шрифтов (font-family — схожие по внешним свойствам):

Семейство ‘serif’ (с засечками на концах; брусковые — с постоянной толщиной линий, антиква — с переменной): Times New Roman, Garamond, Georgia.

Гарнитура ‘sans-serif’ (без засечек, гротески): Arial, Verdana, Univers, Futura, Helvetica, Microsoft / MS Sans Serif, Tahoma, Lucida Sans Unicode

fantasy (декоративные, художественные)

cursive / script (‘скоропись’, глифы частично или полностью соединяются, что напоминает письмо от руки или кистью)

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

или с указанием списка гарнитуры (первый, «основной фонт» — предпочтителен, а последующие, резервные — используются операционной системой, если не найдены первые):

font-family: ‘Lucida Console’, ‘Courier New’, Courier, monospace;

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

Фонты свободного стиля — комбинированные.

Стили начертания (font-style): прямой — normal, курсивные — oblique, italic.

Список гарнитуры (font-family — похожие) составляется так, чтобы обеспечить одинаковый вид страницы на различных устройствах, в разных операционных системах и их версиях. Например, гарнитура Таймс («шериф», то есть с засечками по краям символов) обеспечивается следующим набором шрифтов:

Настройки

Для просмотра этой страницы — понадобится установленный в операционной системе компьютера utf-font (шрифт, содержащий символы Юникод). Например, из наиболее популярных (по рейтингам): бесплатный фонт Free Serif, который можно скачать из Интернет
http://ftp.gnu.org/gnu/freefont/ (рекомендация — выбирать новые версии, из последних выпусков FreeSerif.ttf, woff, otf, в файлах архивов . 20120503.zip)
или, что поновее, шрифт DejaVu fonts по ссылке на сайт с полной информацией и дистрибутивом для загрузки – http://dejavu.sourceforge.net/
Другие Unicode-совместимые фонты, с рейтингом по загрузкам (Others Fonts Support for Unicode Symbols) — Symbola, Code2000, Segoe UI Symbol, Quivira, Everson Mono:
http://www.fileformat.info/info/unicode/block/miscellaneous_symbols/fontsupport.htm

С некоторыми списками фонтов — можно ознакомится на сайте
http://ru.fonts2u.com/category.html? >

После закачки с сайта, извлечения из архива, копирования в каталог C:\WINDOWS\Fonts\ и установки шрифта (Путь: Меню -> Файл -> Установить шрифт) — может понадобиться перезагрузка ПК.

Если слетели шрифты — сделать восстановление системы (для этого должны быть контрольные точки — предыдущие сохранения настроек и файлов). Чтобы не возникало лишних проблем — не надо перегружать папку C:\WINDOWS\Fonts ненужными шрифтами, там должны быть только системные и нужные для работы в данный момент времени.

Под новые файлы выделяется отдельный каталог на диске. Для их просмотра, сортировки и тестирования — необходимо пользоваться специально созданными для этого программами: Extensis Suitecase, Adobe Type Manager, Fontexpert и т.д. Для конвертации (Font Conversion Utility), преобразований, восстановления сбитых таблиц – программки ФонтЛаб и TransType Pro (если возникают проблемы совметимости с Word 2013 и т.п.)

Подробнее о подключении и совместимости смотрите гиперссылки в вики:
http://ru.wikipedia.org/wiki/Шрифты,_поддерживающие_Юникод

Old Standard — поддерживает знаки исторической кириллицы (включая впервые добавленные в Unicode 5.1) и таким образом может использоваться для набора текстов, содержащих фрагменты на старославянском, церковнославянском и подобных языках. Задумывался как многоязычный шрифт для исследовательских работ в области библеистики и классической филологии. Есть поддержка технологии Graphite, позволяющей просто и эффективно использовать лигатуры. Гарнитура Theano получила первоначальную поддержку кирилицы, изначально она ориентировалась для набора только греческих текстов.
Скачать Old Standard 2.2 & Theano 2.0 Fonts
http://openfontlibrary.org/font/old-standard
https://packages.qa.debian.org/t/ttf-oldstandard.html

Свободные (есть бесплатные) кириллические шрифты и их авторы / соавторы:

Computer Modern Cyrillic — Н.Глонти и А.Самарин (TeX, Type1)
DejaVu (TTF)
URWCyr — Валентин Филиппов (X11)
Old Standard — Александр Крюков (TTF, OTF).
Computer Modern Unicode Andrey V.Panov (TTF, OTF).
Linux Libertine & Linux Biolinum (OTF).
Liberation (TTF).
Charis SIL Font (OTF).
Uralic fonts (TTF)

Поиск по образцам и загрузка:

http://www.urbanfonts.com/free-fonts.htm — каталог с рейтингом и свободной закачкой шрифтов (все категории, в том числе и художественные, с возможностью download).

«Шрифтохранилища», откуда некоторые фонты можно скачать бесплатно:
http://www.fontsquirrel.com/
http://typekit.com/ и http://fontdeck.com/
http://gliphmaker.com/htms/fonts%20A1.html — коллекции художественных шрифтов и практические руководства по установке фонтов в разных операционных системах.

http://paratype.ru/store/webfonts.asp — платные гарнитуры наборного русского шрифта от фирмы ПараТайп.

Где можно искать определённые символы Юникода (по HEX-номеру из таблицы):
www.fileformat.info/info/unicode/char/se arch.htm

Сервисы-анализаторы («автоматические распознавалки», OCR) для точной идентификации шрифта по картинке или поиска гарнитур, одинаковых по начертанию.

WhatTheFont или Whatfontis – эти сайты помогут узнать название неизвестного фонта. Туда надо загрузить, со своего компьютера или по указанной ссылке, изображение хорошего качества (чёрно-белое, в формате GIF, JPEG, TIFF, BMP, символы разделены, фон однотонный) с увеличенным фрагментом текста. До 4 символов, букв или цифр (без кириллических, на латинице) — вполне достаточно для распознания и определения похожих шрифтов. Там можно искать и по имени — ввести название шрифта и выбрать из, автоматически полученного списка, его аналоги. Если не нашли, то можно спросить на тематических дизайнерских форумах, добрые люди помогут. Чтобы найти free-версии — выбирать в интерфейсе вариант поиска «Display only free fonts or free alternative fonts» (Отобразить только бесплатные шрифты или альтернативные бесплатные). С помощью этих сервисов — есть возможность автоматически подобрать аналоги системного шрифта (стандартные фонты могут отличаться в разных версиях). Их замена на похожие из числа оригинальных – актуальна в дизайне, при подготовке материала к печати в типографии.

http://new.myfonts.com/WhatTheFont/ – онлайн-сервис, распознавалка шрифтов (не распознаёт рукописный текст и нет кириллицы).

http://www.onlineocr.ru/ – российский Online OCR сервис. Языки распознавания: english, brazilian, bulgarian, byelorussian, catalan, croatian, czech, danish, dutch, estonian, finnish, french, german, greek, hungarian, indonesian, italian, latin, latvian, lithuanian, moldavian, polish, portuguese, romanian, russian, serbian, slovak, slovenian, spanish, swedish, turkish, ukrainian.

ABBYY FineReader – офлайновая программа для компьютера, которая по картинке, логотипу или с отсканированного текста (полиграфия или принтерная распечатка), автоматом определяет гарнитуру и делает подстановку наиболее подходящего фонта, с последующим сохранением документа в нужном выходном формате (Adobe PDF, MS Word doc / docx, Excel xls, Html или Rtf). Символы на изображении должны быть без наложения, с чёткими краями и однородным фоном. Рабочий Fine Reader можно найти на CD-диске с драйверами к сканеру. Похожая программа – OCR CuneiForm (может распознавать смешанный русско-английский текст, любые полиграфические и машинописные гарнитуры всех начертаний, за исключением декоративных и рукописных).

Можно и вручную, «на глазок», подобрать нужный шрифт, соответствующий образцу, выбирая из списка имеющихся в базе сайта:
http://www.fontov.net/podbor-shrifta или http://www.ph4.ru (внимательнее, там, в общем каталоге, могут встретиться «самодельные» фонты, загруженные зарегистрированными пользователями сайта сервиса).

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

Безопасными шрифтами называются: Arial, Courier, Courier New, MS Sans Serif, Symbol, Times New Roman.

Некоторые базовые (системные) шрифты в стандартной поставке разных версий Windows — пригодные для WEB-страниц

таблица 2

Win8

Arial + + + + + + +
Comic Sans MS + + + + + +
Consolas + + +
Courier + + + + + + +
Courier New + + + + + + +
Lucida Console + + + + + +
Lucida Sans Unicode + + + + + +
MS Sans Serif + + + + + + +
Symbol + + + + + + +
Tahoma + + + + + +
Times New Roman + + + + + + +
Verdana + + + + + +

Какие бывают гарнитуры шрифтов?

Если нужно только для набора реферата — бывает достаточно Таймс и Ариал.

Кодовое пространство разделено на 17 «плоскостей» по 65 536 символов:
Плоскость 0 (0000-FFFF): Базовая многоязыковая плоскость (Basic Multilingual Plane, BMP).
Плоскость 1 (10000-1FFFF): Дополнительная многоязыковая плоскость (Supplementary Multilingual Plane, SMP).
Плоскость 2 (20000-2FFFF): Дополнительная иероглифическая плоскость (Supplementary Ideographic Plane, SIP).
Плоскость 3 (30000-3FFFF): Третичная иероглифическая плоскость (Tertiary Ideographic Plane, TIP).
Плоскости 4—13 (40000-DFFFF) не используются.
Плоскость 14 (E0000-EFFFF): Дополнительная плоскость особого назначения (Supplementary Special-purpose Plane, SSP).
Плоскость 15 (F0000-FFFFF) дополнительная область-A для частного использования (Supplementary Private Use Area-A, SPUA-A).
Плоскость 16 (100000-10FFFF) используется как дополнительная область-B для частного использования (Supplementary Private Use Area-B, SPUA-B).

В Юникоде зарезервировано 1 112 064 позиций символов, из которых сейчас используется свыше 100 000. Первые 256 знакомест совпадают с кодовой таблицей ISO 8859-1 («Латиница-1»).


Веб-ш р и ф т ы

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

Возможна подгрузка (с сервера, на котором размещён сайт или из сервиса GoogleWebFonts) файлов шрифтов к открываемой веб-странице — через CSS, с помощью правила @font-face, импорта из файла стилей @import или элемента

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

В этом смысле, у сервиса динамической подгрузки шрифтов от google.com/fonts — есть преимущества. Загружаемые оттуда фонты — сжаты и адаптированы, по формату (основные: eot, woff, svg, ttf / otf), к браузеру клиента. При повторном обращении — используются кешированные файлы (длительного срока хранения), что ещё больше ускоряет их подгрузку. Можно определить список шрифтов (font-family), задать ограничения по стилю начертания (font-weight:r,i,b,bi), выбрать национальную раскладку (кириллицу или латиницу) и только определённые символы (например, новые символы Юникод, отсутствующие в фонтах, давно установленных и необновляемых на компьютере).

Пример подключения и импорта шрифтов на сайт с Google Fonts:

— в примере формируется файл шрифта для отображения нескольких цифр, спецсимволов (помещены способом copy / paste) и букв русского и латинского алфавита. Стили начертания и насыщенность — указаны несколькими разрешёнными, в рамках данного сервиса, приёмами (с буквальным названием, сокращённый, цифровой и комбинированные). Кириллица, стандартные разделители, зарезервированные символы и часть знаков препинания — кодируются в UTF8 с помощью Escape-механизма URI (конвертирование каждого байта в Hex %xx или %uxxxx, если числовое значение символа больше Dec 255). Возможна сокращённая форма задания параметров для fonts.googleapis.com, например, код «Open+Sans:bi» эквивалентен следующему результату:

@font-face < font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local(‘Open Sans Bold Italic’).

Имена шрифтов из получаемых файлов с сервиса Google Web Fonts — указываются в таблице стилей CSS:

Конвертация (UTF-8 characters encoding for URI’s) может проводиться скриптом на JavaScript:
http://www.rishida.net/tools/conversion/

@font-face

Браузер последовательно пробует элементы списка шрифтов из дескриптора «src» в правиле @font-face, до тех пор, пока успешно не загрузит. Первыми указываются фонты, которые могут быть на компьютере, т.е. доступные локально. Если их нет, тогда — загрузка с сервера, по Интернету.

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

.text < font-family: Arial, sans-serif; font-size: 100%; >
— если в системе нет Ариала, то будет применён sansserif.

Поддержка основными браузерами

Internet Explorer поддерживает только шрифты .eot (Embedded OpenType, сжатый формат).

Firefox, Chrome, Safari и Opera поддерживают шрифты .ttf (True Type Font, векторный) и .otf (OpenType Font).

WOFF (Web Open Font Format) — открытый сжатый кроссбраузерный вэб-формат шрифта OpenType или TrueType, поддерживающий дополнительные метаданные. Начиная с версий браузеров: IE9+, FF3.6+, Chrome 5+

SVG (Scalable Vector Graphics) — формат векторной графики. This is an XML format required by iOS devices before version 4.2.

Знаки-подписи, идентифицирующие авторство и название шрифта

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

Чтобы это увидеть, разглядеть — в первую очередь, необходимо смотреть на графические особенности изображений стандартного набора шахматных фигур (диапазон в таблице Юникода — U+2654 — U+265F) и знаков задиака (U+263F — U+2653). И значки снеговика («SNOWMAN», U+2603), часто, бывают нарисованы художниками–шрифтовиками — максимально оригинально, с юмором и с шуткой. Убедится в этом можно, посмотрев и сравнив особенности глифов разных шрифтов, на сайте
http://www.fileformat.info/info/unicode/char/2603/fontsupport.htm
(нажать по ссылке «view», напротив названий фонтов — этим методом их можно, достаточно точно и быстро, идентифицировать). Чтобы смотреть другие картинки — надо вместо номера 2603 в адресной строке поставить нужное число, например 2658 (код шахматной фигуры «Белый конь»).

Терминология

UTF-16 (англ. Unicode Transformation Format) — способ кодирования символов. Данная кодировка позволяет записывать символы Юникода в диапазонах U+0000 — U+D7FF и U+E000 — U+10FFFF (всего 1 112 064 штук). При этом каждый символ записывается, обычно, одним или двумя 16-битными словами. Для определения порядка байтов используется метка BOM (английск. Byte order mark), которая, в виде кода 0xFE 0xFF (U+FEFF) или других сочетаний, записывается в начале файла с текстом.

На интернет-страницах, сохраняемых издателем в кодировке UTF-8 не используется метка порядка байтов, поэтому – УТФ-8 нужно сохранять «без БОМ» (without BOM). Перекодировать текстовый файл — можно с помощью редактора Notepad ++). Обычный блокнот для этого не подходит, т.к. дописывает в начале лишние байты (валидатор W3C — будет выдавать ошибку).

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

Трекинг — расстояние между символами в слове. Бывает отрицательный (буквы расположены плотнее) или положительный (растянуто по горизонтали).

Стили начертания (font-style): прямой — normal, курсивные — oblique / italic.

Насыщенность (плотность начертания, жирность шрифта — font-weight) обусловленна изменением толщины основных и соединительных штрихов. Градация: светлое (light), нормальное (regular, book), полужирное (demi), жирное (bold), темное (heavy), черное (black) и сверхжирное (extra bold). Её можно задавать в цифровом виде, например — font-weight: 900 (B o l d)

Пропорции начертания (font-stretch): узкий (condensed), нормальный (normal) и широкий (expanded), с градациями (semi, extra, ultra).

В ы к л ю ч к а — выравнивание текста (по левому краю, по правому краю, по центру, по формату и «полная выключка»).

Интерлиньяж (line-height) — межстрочное расстояние.

Кегль (font size) — размер шрифта по высоте.

Кернинг (kerning) — межбуквенные интервалы.

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

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

Дингбаты — пиктограммы, в виде различных оформительских орнаментов, иконок и значков.

Скопировать символ (copy / paste) — это значит, выделить его на экране, копировать в буфер обмена памяти компьютера и вставить в нужное место, в тексте или в HTML-коде.

Одной из основных единиц типографской системы мер является 1 пункт (1 п.), вычисляемый из французского дюйма (делением на 72) и равный 27,1 / 72 = 0,3764 ≈ 0,376 мм

В компьютерной графике 1 pt (point) ≈ 0,353 мм

Основные разновидности шрифтов:

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

По стилю различают шрифт: Прямой (Roman), Курсивный (Italic), Полужирный(Bold), Нормальный (Regular, отличается от прямого меньшей толщиной штриха), Узкий (Narrow), Широкий (Wide).

Дополнительные параметры форматирования символов: подчеркивание различными типами линий (Подчеркнутый , Underline), изменение вида значков (зачёркнутый, надстрочный, подстрочный, с тенью, контур, все прописные), изменение расстояний между символами (межсимвольный интервал — обычный, разреженный или уплотнённый).

По ширине символов шрифты делят на моноширинные (как на старой печатной машинке) и пропорциональные. Например, буква «I» будет намного уже, чем «W». В CSS — моноширинный шрифт выбирается или с помощью конструкции font-family: monospace , и/или указанием названия конкретного моно.шрифта, например:

Значения ширины шрифтов (font-weight) задаются по цифровой шкале, где значение ‘400’ соответствует «normal» данного семейства ш р и ф т о в. Названия веса, ассоциированные с такой шириной, обычно: Book, Regular, Roman, Normal, Medium.
«Bold» соответствует весовому значению ‘700’, Heavy — ‘800’, Black — 900.

Рекомендации

Соотношение характеристик текста и фона — необходимо удобочитаемое и по цвету, и по контрастности.

В документах и рефератах — печатать текст, сохраняя в стандартном формате редактора Word (doc / docx), гарнитурой «Таймс» («Times New Roman»), через 1,5 интервала. Размер шрифта — задать 12 пунктов (14 пт — для документов).
Основной заголовок текста — 16-18 pt, промежуточные заголовки второго и третьего уровня — 14-16 кеглей, жирным начертанием (Bold).
Отступы, ширина полей: левого — 30 миллиметров, правого — 10 мм, верхнего и нижнего — по 2 сантиметра.

Ширина строки документа, при его просмотре с экрана компьютера или планшетника — должна содержать не более 50-70 знаков. Если их больше, то увеличивается нагрузка на зрение и замедляется скорость чтения.

Некоторые диапазоны из общего набора символов Юникода (здесь этих групп перечислено больше, чем есть в WGL4):

Базовая латиница (Basic Latin, группа знаков из таблицы ASCII, коды от U+0000 до U+007F).
Дополнения к латинице-1 (Latin-1 Supplement, U+0080 — U+00FF).
Расширенная латиниа A (Latin Extended-A, U+0100 — U+017F).
Расширенная латиница B (Latin Extended-B, U+0180 — U+024F).
Модификаторы отступов (Spacing Modifier Letters, U+02B0 — U+02FF).
Греческие символы (Greek, U+0370 — U+03FF).
Кириллица (Cyrillic, U+0400 — U+04FF).
Дополнения к расширенной латинице (Latin Extended Additional, U+1E00 — U+1EFF).
Общие знаки препинания (General Punctuation, U+2000 — U+206F).
Подстрочные и надстрочные символы (Superscripts and Subscripts, U+2070 — U+209F).
Знаки валют (Currency Symbols, U+20A0 — U+20CF, включая знак евро «€»).
Дополнения диактирических знаков и символов (Combining Diacritical Marks for Symbols, 20D0-20FF).
Буквообразные символы (Letterlike Symbols, U+2100 — U+214F).
Числовые формы (Number Forms, U+2150 — U+218F).
Стрелки (Arrows, U+2190 — U+21FF).
Математические операторы (Mathematical Operators, U+2200 — U+22FF).
Различны технические символы (Miscellaneous Technical, U+2300 — U+23FF).
Псевдографика, значки для отображения рамок (Box Drawing, U+2500 — U+257F).
Блочные элементы (Block Elements, U+2580 — U+259F).
Геометрические фигуры (Geometric Shapes, U+25A0 — U+25FF).
Разные смешанные символы (Miscellaneous Symbols, U+2600 — U+26FF).
Дингбаты — — наборs графических символов (2700 — 27BF).
.
Шрифт Брайля (Braille Patterns, 2800 — 28FF).
.
Дополнительные математические операторы (Supplemental Mathematical Operators, 2A00 — 2AFF).
.
Глаголица (Glagolitic, 2C00 — 2C5F) .
.
Расширенная кириллица-A (Cyrillic Extended-A, 2DE0 — 2DFF).
.
Унифицированные иероглифы ККЯ, которые используются в китайском, корейском и японском письме (CJK Unified Ideographs, 4E00 — 9FCC).
.
Специальные символы (Specials, FFF0 — FFFF).
.
Музыкальные символы (Musical Symbols, 1D100 — 1D1FF).
.
Математические буквенно-цифровые символы (Mathematical Alphanumeric Symbols, 1D400 — 1D7FF).
Символы Игральных карт (Playing Cards, 1F0A0 — 1F0FF) .
Вложенные буквы и цифры (дополнение) (Enclosed Alphanumeric Supplement, 1F100 — 1F1FF).
Вложенные идеографические символы (дополнение) (Enclosed Ideographic Supplement, 1F200 — 1F3FF).
Смешанные символы и пиктограммы (Miscellaneous Symbols And Pictographs, 1F300 — 1F5FF).
http://www.unicode.org/charts/PDF/U1F300.pdf

Смайлики (Emoticons, 1F600 — 1F64F).
Декоративные дингбаты — набор графических символов (Ornamental Dingbats, 1F650 — 1F67F).
Символы транспорта и указателей (Transport And Map Symbols, 1F680 — 1F6FF).
Расширенные геометрические фигуры (Geometric Shapes Extended, 1F780 — 1F7FF).
.

Списки шрифтов, имеющих символы из конкретного блока Unicode (есть ссылки на сайты для бесплатного скачивания или покупки платных версий):
http://www.fileformat.info/info/unicode/block/index.htm

Кириллица в Юникоде (сгруппированные диапазоны кодов в hex):


Cyrillic & Supplement (кириллица c приложениями).
U+0400 — U+045F — буквы славянских алфавитов из кодировки ISO 8859-5, но перемещённые вверх на 864 позиции.
U+0460 — U+0489 — исторические буквы и символы из старославянского (церковнославянского) алфавита.
U+048A — U+052F — дополнительные буквы для разных языков, использующих кириллицу.

Cyrillic Extended-A (кириллица, расширение A).
U+2DE0 — U+2DFF — церковнославянские буквотитлы.

Cyrillic Extended-B (кириллица, расш-е B).
U+A640 — U+A67F — дополнительные буквы и символы для церковнославянского языка.
U+A680 — U+A69F — дополнительные буквы для старой абхазской орфографии.

Что такое код i курсив

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

    Чтобы сделать текст жирным, заключите его в [b][/b], например:

[b]Привет[/b]

станет Привет
Для подчёркивания используйте [u][/u], например:

[u]Доброе утро[/u]

станет Доброе утро
Курсив делается тегами [i][/i], например:

Это [i]здорово![/i]

выдаст Это здорово!

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

    Цвет текста можно изменить, окружив его [color=][/color]. Вы можете указать либо известное имя цвета (red, blue, yellow и т. п.), или шестнадцатеричное представление, например #FFFFFF, #000000. Таким образом, для создания красного текста вы можете использовать:

    [color=red]Привет![/color]

    [color=#FF0000]Привет![/color]

    оба способа дадут в результате Привет!
    Изменение размера достигается аналогичным образом при использовании [size=][/size]. Этот тег зависит от используемых шаблонов, рекомендуемый формат — число, показывающее размер текста в процентах, от 20% (очень маленький) до 200% (очень большой) от размера по умолчанию. Например:

    [size=30]МАЛЕНЬКИЙ[/size]

    скорее всего будет МАЛЕНЬКИЙ

    [size=200]ОГРОМНЫЙ![/size]

    будет ОГРОМНЫЙ!

Могу ли я комбинировать теги? Да, конечно, можете. Например, для привлечения чьего-то внимания вы сможете написать:

[size=200][color=red][b]ПОСМОТРИТЕ НА МЕНЯ![/b][/color][/size]

что выдаст ПОСМОТРИТЕ НА МЕНЯ!

Мы не рекомендуем выводить таким образом длинные тексты! Учтите, что вы, автор сообщения, должны позаботиться о том, чтобы теги были правильно вложены. Вот этот BBCode, например, неправилен:

[b][u]Это неверно[/b][/u]

Создание ссылок

Ссылки на другой сайт В BBCode поддерживается несколько способов создания URL’ов.

    Первый из них использует тег [url=][/url], после знака = должен идти нужный URL. Например, для ссылки на phpbbex.com вы могли бы использовать:

[url=http://phpbbex.com/]Посетите форум phpBBex![/url]

Это создаст следующую ссылку: Посетите форум phpBBex! Учтите, что ссылка будет открываться в том же или в новом окне, в зависимости от настроек браузера пользователя.
Если вы хотите, чтобы в качестве текста ссылки показывался сам URL, вы можете просто сделать следующее:

[url]http://phpbbex.com/[/url]

Это выдаст следующую ссылку: http://phpbbex.com/

  • Кроме того, phpBBex поддерживает возможность, называемую Автоматические ссылки, это переведёт любой синтаксически правильный URL в ссылку без необходимости указания тегов и даже префикса http://. Например, ввод www.phpbbex.com в ваше сообщение приведёт к автоматической выдаче www.phpbbex.com при просмотре сообщения.
  • То же самое относится и к адресам email, вы можете либо указать адрес в явном виде:

    [email]example@mail.com[/email]

    что выдаст example@mail.com, или просто ввести example@mail.com в ваше сообщение, и он будет автоматически преобразован при просмотре.

    Как и со всеми прочими тегами BBCode, вы можете заключать в URL’ы любые другие теги, например [img][/img] (см. следующий пункт), [b][/b] и т. д. Как и с тегами форматирования, правильная вложенность тегов зависит от вас, например:

    [url=http://phpbbex.com/][img]http://phpbbex.com/logo.png[/url][/img]

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

    Показ изображений в сообщениях

    Добавление изображения в сообщение BBCode включает тег для добавления картинки в ваше сообщение. При этом следует помнить две очень важные вещи: во-первых, многих пользователей раздражает большое количество изображений, во-вторых, ваше изображение уже должно быть размещено в интернете (т. е. оно не может быть расположено только на вашем компьютере, если, конечно, вы не запустили на нём веб-сервер!). На данный момент нет возможности хранить изображения локально на phpBBex (ожидается, что это ограничение будет снято в следующей версии phpBBex). Для вывода изображения вы должны окружить его URL тегами [img][/img]. Например:

    [img]http://phpbbex.com/logo.png[/img]

    Как указано в предыдущем пункте, вы можете заключить изображение в теги [url][/url], то есть

    [url=http://phpbbex.com/][img]http://phpbbex.com/logo.png[/img][/url]

    Добавление вложений в сообщение Теперь вложения могут быть помещены в любой части сообщения при помощи нового тега BBCode [attachment=][/attachment], если вложения разрешены администратором форума и если вы имеете необходимые права доступа. На странице размещения сообщения находится выпадающий список (соответственно кнопка) для размещения вложений в сообщении.

    Цитирование и вывод форматированных текстов

    Цитирование при ответах Есть два способа процитировать текст, со ссылкой и без.

      Когда вы используете кнопку «Цитата» для ответа на сообщение, то его текст добавляется в поле ввода окружённым блоком [quote=»»][/quote]. Этот метод позволит вам цитировать со ссылкой на автора либо на что-то ещё, что вы туда впишете. Например, для цитирования отрывка текста, написанного Mr. Blobby, вы напишете:

    [quote=»Mr. Blobby»]Текст Mr. Blobby будет здесь[/quote]

    В результате перед текстом будут вставлены слова «Mr. Blobby писал(а):». Помните, вы должны заключить имя в кавычки «», они не могут быть опущены.

  • Второй метод просто позволяет вам что-то процитировать. Для этого вам надо заключить текст в теги [quote][/quote]. При просмотре сообщения будет просто показан текст в блоке цитирования.
  • Вывод кода или форматированного текста Если вам необходимо вывести программный код или что-то, что должно быть выведено моноширным шрифтом, вы должны заключить текст в теги [code][/code] (для больших текстов, оформляется в виде отдельного блока) или [tt][/tt] (для коротких однострочных текстов, без отдельного блока), например:

    [code]echo «This is some code»;[/code]

    Всё форматирование, используемое внутри тегов [code][/code] и [tt][/tt], будет сохранено. Подсветка синтаксиса языка PHP может быть включена с помощью [code=php][/code] и рекомендуется при отправке сообщений с PHP-кодом для улучшения его удобочитаемости.

    Создание списков

    Создание маркированного списка BBCode поддерживает два вида списков: маркированные и нумерованные. Они практически идентичны своим эквивалентам из HTML. В маркированном списке все элементы выводятся последовательно, каждый отмечается символом-маркером. Для создания маркированного списка используйте [list][/list] и определите каждый элемент при помощи [*]. Например, чтобы вывести свои любимые цвета, вы можете использовать:

    [list]
    [*]Красный
    [*]Синий
    [*]Жёлтый
    [/list]

    Это выдаст такой список:

    • Красный
    • Синий
    • Жёлтый

    Создание нумерованного списка Второй тип списка, нумерованный, позволяет выбрать, что именно будет выводиться перед каждым элементом. Для создания нумерованного списка используйте [list=1][/list] или [list=a][/list] для создания алфавитного списка. Как и в случае маркированного списка, элементы определяются с помощью [*]. Например:


    [list=1]
    [*]Пойти в магазин
    [*]Купить новый компьютер
    [*]Обругать компьютер, когда случится ошибка
    [/list]

    выдаст следующее:

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

    Для алфавитного списка используйте:

    [list=a]
    [*]Первый возможный ответ
    [*]Второй возможный ответ
    [*]Третий возможный ответ
    [/list]

    что выдаст

    1. Первый возможный ответ
    2. Второй возможный ответ
    3. Третий возможный ответ

    Полужирный текст (Bold)

    HTML-страница

    Цель работы

    Освоить основные приёмы форматирования текста с HTML-страницы.

    Общие сведения

    Составление программы на языке HTML чем-то напоминает набор текста в редакторе MS Word. Как известно, если при наборе текста в MS Word бывает необходимо сделать какое-то слово полужирным, нужно его выделить и нажать специальную кнопку на вкладке ГЛАВНАЯ. Чтобы отформатировать текст на HTML-странице, нужно поставить вокруг выделяемого слова специальные символы. В различных литературных источниках эти символы могут называться по-разному: маркерами, метками, дескрипторами, командами управления или тегами.

    Например, слово «Проба» на HTML-странице будет выделено полужирным шрифтом, если использовать такую конструкцию:

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

    Проба

    Этот пример достаточно типичен. Большинство существующих тегов парные: первый тег является открывающим, а второй тег — закрывающим (завершающим, конечным). Распознать закрывающий тег можно по символу «/». Открывающий тег имеет такой формат:

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

    имя атрибута [=значение]

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

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

    Заметим, что HTML-страницу допустимо называть Web-страницей (Веб-страницей). Частота использования этих двух терминов в технической литературе почти одинаковая.

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

    При создании языка HTML авторами использовался английский язык. Смысл имён многих тегов становится понятным при переводе английских слов на русский язык, например, b — bold (чёткий, жирный), i — italic (курсив), u — underline (подчёркивание), head (голова), body (тело), img (image — изображение), br – break (разрыв).

    Теги могут быть вложенными. Например,

    HTML — язык для создания Web-страниц

    В результате выполнения браузером этого фрагмента кода на экране клиента появится фраза, написанная жирным шрифтом (теги b), причём слово HTML будет выделено курсивом (теги i):

    HTML — язык для создания Web-страниц

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

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

    В данном случае использован тег font, атрибут color, которому присвоено значение #ff00ff. Форма записи значения может быть различной. Аналогичный результат будет получен, если значение атрибута color будет записано другим способом: color=»rgb(100%, 0%, 100%)», color=»rgb(255,0,255)» или color=»fuchsia»

    Этот пример говорит о том, что значение атрибута может быть задано с помощью символьной метки (например, red, blue), с помощью трёх десятичных чисел (каждое может изменяться в пределах от 0 до 255), с помощью трёх шестнадцатеричных чисел (каждое изменяется от 0 до FF), путём указания процентной насыщенности каждого из трёх основных цветов (в процентах).

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

    Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

    Теги и атрибуты при роботе со шрифтами html

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

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

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

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

    • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
    • — размер больше установленного по умолчанию;
    • — меньший размер шрифта;
    • — наклонный текст ( курсив ). Аналогичный ему тег ;
    • — текст с подчеркиванием;
    • — зачеркнутый;
    • — отображение текста только в нижнем регистре;
    • — в верхнем регистре.

    Возможности атрибута style

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

    1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
    Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

    2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
    Синтаксис написания:

    Размер шрифта можно также задать:

    • В пикселях;
    • В абсолютном значении ( xx-small, x-small, small, medium, large );
    • В процентах;
    • В пунктах ( pt ).

    3) font-style – устанавливает стиль написания шрифта. Синтаксис:

    • normal –нормальное написание;
    • italic – курсив;
    • oblique – шрифт с наклоном вправо;
    • inherit – наследует написание родительского элемента.

    Пример того, как поменять шрифт в html с помощью этого свойства:


    4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

    Пример того, как изменить шрифт в html этим свойством:

    5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

    • bold – устанавливает полужирный шрифт html;
    • bolder – жирнее относительно normal;
    • lighter –менее насыщенное относительно normal;
    • normal – нормальное написание;
    • 100-900 – задается толщина шрифта в числовом эквиваленте.

    Свойство font и цвет шрифта html

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

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

    • caption – для кнопок;
    • icon – для иконок;
    • menu – меню;
    • message-box –для диалоговых окон;
    • small-caption – для небольших элементов управления;
    • status-bar – шрифт строки состояния.

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

    Русскоязычные шрифты и их поддержка

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

  • Arial Black ;
  • Arial ;
  • Comic Sans MS ;
  • Courier New ;
  • Georgia ;
  • Lucida Console ;
  • Lucida Sans Unicode ;
  • Palatino Linotype ;
  • Tahoma ;
  • Times New Roman ;
  • Trebuchet MS ;
  • Verdana .
      Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.

    Параметры текста в HTML: шрифты, курсив, жирный и другие

    В этом видеоуроке мы рассмотрим дополнительные параметры текста:

    • Шрифты
    • Курсив, жирный, подчеркнутый , перечеркнутый и другие
    • Добавлено: 16 апреля 2011
    • Автор: Олег Зубцов
    • Рубрика: Видеокурс по HTML
    • Метки:
      • HTML
      • шрифты
    1. Разархивировать скачанный файл.
    2. Открыть папку index.
    3. Запустить файл index.html в браузере.

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

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

    Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка H2». Для начала, давайте изменим ему шрифт. Поставим «Verdana». Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие шрифты. Зачастую их нет на компьютере у пользователя.

    Как сделать текст курсивом?

    Теперь давайте уберем тег

    Как сделать текст жирным?

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

    Как сделать текст подчеркнутым?

    А текст заголовка h3сделаем подчеркнутым, используя теги .

    Давайте сохраним наш документ и перейдем в браузер. Как видите, «текст заголовка h3» у нас подчеркнутый, «текст курсивом» изображен курсивом, и «синий цвет» изображен жирным.

    Как сделать текст перечеркнутым?

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

    Как сделать текст моноширным?

    А текст, помещенный в тег

    Сохраняем страницу и переходим в браузер. Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.

    Как написать текст в верхнем или нижнем индексе?

    Давайте перейдем в код и еще поэкспериментируем с текстом. Допустим, мы хотим написать математическую задачку типа «два плюс два равно два в квадрате». Как нам написать «в квадрате»? Очень просто – используя теги , что означает «верхний индекс». Если нам понадобится написать нижний индекс, то в этом случае мы воспользуемся тегами . Они отличаются от предыдущих последней буквой.

    Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка H3» цифра «3» изображена в нижнем индексе.

    Как сделать текст большим и маленьким?

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

    А «Центрированный текст без использования тега p» — чуть больше. Используем теги .

    В переводе «big» означает «большой», а «small» — «маленький».

    Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.

    Илон Маск рекомендует:  Шаблон сайта деловой HTML, CSS, Photoshop (psd), 5 страниц
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL