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

Хотя в настоящее время большинство русскоязычных веб-страниц имеют кодировку кириллицы (Windows-1251), одна мог разработать русскую страницу в кодировке кириллицы ( KOI8-R ).

Как было объяснено в разделе «Кириллические шрифты и кодировки» раздел моего сайта «Кириллица (русская): инструкции для Windows и Интернета»,

современные приложения, такие как Netscape 4 + / Mozilla, Internet Explorer, Front Page 2000 и т. д.позволяют пользователю работать с родным для MS Windows набором шрифтов и клавиатурных инструментов — кодирования «Кириллица (Windows-1251)» и обработать KOI8-R автоматически , без KOI8-R шрифты и инструменты клавиатуры.

Для разработчика кириллической HTML-страницы это означает следующее:

• разработчик вводит текст будущей страницы KOI8-R, используя шрифты Windows-1251, такие как «Arial (Cyrillic)» и инструменты клавиатуры Windows-1251 («RU» на панели задач), так что то, что он / она действительно имеет в окне редактора, — это текст Windows-1251 (или Unicode), а не текст KOI8-R
• Но если в качестве кодировки для этого HTML-файла был указан KOI8-R, то современные Редакторы WYSIWYG HTML незаметно, «за кулисами» конвертируют текст из Windows-1251 — KOI8-R и поместите текст KOI8-R на жесткий диск в формате. HTML
  Они также поместят следующую строку вверху HTML-текста:
  DOCTYPE и кириллица — HTML и CSS — Форумы SitePoint

  Для тех, кто хочет перейти к делу, вот код, который я использую неукоснительно. Я использую XHTML, поэтому мне нужно включить атрибуты lang и xml: lang в тег html. Вы определяете набор символов в метатеге следующим образом.

  «” Перед типом документа технически правильно для определения набора символов. Однако из-за этого IE (или, по крайней мере, некоторые версии) растворяется в небольших лужах нефункциональной слизи, поэтому я никогда не использовал его и не рекомендую. Я не использовал метатег для определения языка, однако, не зная какой-либо ключевой причины для его включения, определять какие-либо настройки в нескольких местах — плохая практика. Как только одно будет обновлено, а другое не обновлено, ваша страница будет противоречить самой себе, что может привести к проблемам.

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

  Я думаю, мы должны вернуться к этому. Это настоящая причина, по которой вы используете utf-8. Есть все виды тонких сбоев, которые могут возникнуть, если вы попытаетесь закодировать одну страницу в одной кодировке, а другую страницу того же сайта — в другой. Попытка использовать два разных языка на одной странице может сработать в зависимости от конкретных символов, которые вы используете, и от того, доступны ли они … ха-ха … попробуйте следить за ЭТОМ обслуживанием страниц вашего веб-сайта.Это кошмар, который заставил людей в первую очередь создавать Unicode, и я постоянно использую его на всех своих страницах на всех своих сайтах. Редко может появиться небольшая неровность, но это ничто по сравнению с попыткой найти альтернативы, особенно если вы создаете веб-сайт для международного использования.

  Обратите внимание, что это не означает, что вы всегда будете получать хорошее отображение Unicode. Использование Unicode просто означает, что когда HTTP-ответ, который вы отправляете браузерам посетителя, будет понятнее, чем при использовании любого другого метода.К сожалению, отображение символов ТАКЖЕ зависит от поддержки шрифтов на компьютере посетителя. Поэтому, если вы используете Unicode, но на вашем компьютере нет шрифтов, содержащих эти глифы, вы увидите вопросительные знаки, или маленькие прямоугольники, или квадраты с четырехзначными кодировками Unicode, или любые другие подстановочные знаки, которые использует ваша ОС. Это не ошибка Unicode, это проблема со шрифтом. Другой набор символов не стал бы лучше, потому что проблема заключается в отсутствии поддержки шрифтов; плюс у вас есть дополнительная проблема, заключающаяся в том, что набор символов с большей вероятностью вызовет проблемы.

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

  Кроме того, вы должны ВСЕГДА указывать язык документа. Вероятно, есть какая-то логика, которая по умолчанию использует английский или что-то в этом роде, но вы можете вызвать серьезные проблемы с удобством использования и доступностью, особенно для интерфейсов, не связанных с браузером.Поработав в Braille Institute, я могу привести пару случаев, когда не указание языка или его неправильное выполнение для некоторых пользователей приведет к полной чуши.

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

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

  Семейства шрифтов CSS — учебные пособия по CSS

  serif
  Тип	Название шрифта
  Латинские шрифты	Times New Roman, Бодони, Гарамонд, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
  Греческие шрифты	Bitstream Cyberbit
  Кириллические шрифты	Adobe Minion Cyrillic, Excelcior Кириллица Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
  Еврейские шрифты	New Peninim, Raanana, Bitstream Cyberbit
  Японские шрифты	Ryumin Light-KL, Kyokasho ICA, Futo Min A101
  Арабские шрифты	Bitstream Cyberbit
  Шрифты Cherokee	Ло Цицеро Чероки
  без засечек
  Латинские шрифты	MS Trebuchet, ITC Avant Garde Готика, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
  Греческие шрифты	Аттика, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
  Кириллические шрифты	Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
  Еврейские шрифты	Arial Hebrew, MS Tahoma
  Японские шрифты	Shin Go, Heisei Kaku Gothic W5
  Арабские шрифты	MS Tahoma
  курсив
  Латинские шрифты	Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
  Кириллические шрифты	ER Architekt
  Еврейские шрифты	Корсива
  Арабские шрифты	DecoType Naskh, монотипия урду 507
  фэнтези
  Латинские шрифты	Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
  моноширинный
  Латинские шрифты	Courier, MS Courier New, Prestige, Эверсон Моно
  Греческие шрифты	MS Courier New, Everson Mono
  Кириллические шрифты	ER Kurier, Everson Mono
  Японские шрифты	Осака Моноширинный
  Шрифты Cherokee	Эверсон Моно

  Кириллические шрифты F&P для ПК, Mac и UNIX

  ---

  Каждый обычай когда-то был эксцентричностью; каждая идея когда-то была абсурдом. — Холбрук Джексон

  ---

  Ниже приведены ресурсы, указывающие на все, что вам нужно знать, чтобы настроить ваш ПК, Macintosh или UNIX на рабочую станцию ​​для работы с кириллическими шрифтами. Обратите внимание, что на F&P, если вы хотите читать наши страницы на русском языке, но не используете кириллицу, вы всегда можете использовать опцию «Trans» внизу страниц, которая «транслитерирует» русский текст в латинскую кодировку.

  ---

• Microsoft Типографика *

Сайт Microsoft Typography WWW — это он-лайн ресурс для пользователей шрифтов и разработчиков шрифтов.На этом сайте вы можете скачать бесплатные шрифты для использования с компьютерами Windows и Apple Macintosh, узнать о многоязычной поддержке Windows и многое другое.

• PeReStRoIkA — Кириллические шрифты *

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

• Yamada Language Guides *

  Это руководство содержит огромный выбор языковых ресурсов в WWW, включая архив шрифтов, ссылки на списки рассылки и группы новостей, связанные с языком. Обладая информацией на более чем 115 языках (включая русский, русский язык жестов и армянский) и 112 шрифтами для более чем 40 языков, это очень полезный сайт.

• Кириллица (аудио и видео)

  Слушайте и просматривайте кириллицу.

• Как «русифицировать» компьютер *

  Это сокращенное руководство по русификации вашего компьютера, написанное Чарльзом Дорсеттом, предназначено для Windows95, Netscape 3.0 и Eudora.

• Macintosh и KOI-8R *

  Илья Моисеев написал этот фантастический сайт с рекомендациями и подробными инструкциями о процессе русификации Eudora, NewsWatcher, Netscape и NCSA Telnet.Графика включена, чтобы облегчить понимание.

• Страница Пола в Compuserve *

  Павел Городянский разработал отличный ресурс по вопросам кириллического текста / шрифтов. Это особенно удобно для пользователей Windows.

• Русский язык в другом ПО *

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

• Русификация Macintosh *

  Матвей Пальчук создал очень интересный сайт, посвященный русификации Macintosh.Основная цель этого сайта — дать возможность пользователям MacOS ™, подключенным к Интернету, работать с русским текстом в формате KOI8. Доступна условно-бесплатная «Студенческая» раскладка клавиатуры для стандартных кириллических шрифтов KO18 и Apple.

• СовИнформБюро: Русифицируйте все *

  Коллекция кириллических шрифтов и программного обеспечения для различных платформ, включая ПК, Mac и даже Commodore Amiga. На этой странице представлены, в частности, подробные инструкции по установке кириллических шрифтов для MS Windows Netscape.

• Веб-шрифты для Windows и Mac *

  Microsoft предлагает БЕСПЛАТНО новые наборы шрифтов, включая cp 1251 Cyrillic. Есть множество лиц, включая Times, Arial, Arial Black Courier и Impact (например, сжатый Black Arial). Очевидно, они предназначены для замены шрифтов, поставляемых с Windows, поскольку содержат символы для многих других языков. Также имеется многоязычная поддержка информации Windows.

  ---

  [Английский] [Русский TRANS | KOI8 | ALT | ВЫИГРАТЬ | MAC | ISO5] F&P Home ° Комментарии ° Гостевая книга

  ---

  1996 Друзья и партнеры
  Наташа Булашова, Грег Коул
  Пожалуйста, посетите Российские и американские зеркальные сайты Друзей и Партнеров.Обновлено: 1998-11-
  

  Пожалуйста напишите нам с вашими комментариями и предложениями.
  

Домашняя страница проекта CYR-RFX

Домашняя страница проекта CYR-RFX


Кириллица и евро шрифты для X11

---

Настоящая работа посвящена г.Troodie — пример настойчивости




Что здесь

CYR-RFX стартовал как набор кириллических шрифтов для X-Window («CYR-RFX» означает «CYRillic Raster Fonts for X»). Теперь он включает несколько кириллических кодировок и две латинские (обе со знаком евро).

Эти шрифты являются модифицированными (в основном с добавлением кириллицы) версиями стандартные шрифты X-Window из misc / и 75dpi /.

Включены все шрифты * iso8859-1 из misc /, и большинство важные 75dpi / one: lu (LucidaSans), lut (LucidaSansTypewriter), tim (Times), helv (Helvetica) и кур (Курьер).

Подробное описание проекта CYR-RFX доступно в doc / README.en.html файл.

Текущее состояние и планы на будущее

Версия 1.2 намечена на конец июля / начало августа, и он будет иметь следующие особенности:

• Полное покрытие символов 1251 / 8859-5.
• Старокириллические глифы (ять, фита, ижица).
• Некоторые новые кодировки: ISO-IR-111 (ECMA-Cyrillic), KOI8-O (Старая кириллица), IBM-CP855 (DOS югославский).

Текущая «разрабатываемая» версия — 1.1 (файлы -1.1 действительно меняются снимки работы до 1. 2). «Стабильные» файлы 1.0 по-прежнему имеется в наличии.

1.2, а затем 1.4 с New Century Schoolbook (ncen) семья (точное время неизвестно) и 2.0 (если когда-либо появятся 🙂 будет включать 100dpi Times и Courier.

Загрузить

Примечания:

⁽¹⁾

Символы в диапазоне 0-127 не показаны на скриншотах, поскольку эта часть идентична во всех кодировках.

⁽²⁾

Только кириллица, однострочный рисунок и некоторые специальные глифы.

⁽³⁾

В настоящее время кириллица не кои8 (бывшая югославская) глифы присутствуют только в некоторых шрифтах (включая все misc / единицы).

⁽⁴⁾

Без специфичных для Mac глифов, таких как «Дельта» и «бесконечность».

⁽⁵⁾

В настоящее время не все U + 0400 глифы присутствуют, только WGL4.

Все архивы содержат файлы в виде КОДИРОВАНИЕ / {разное, 75 точек на дюйм} / *. pcf с пользователем = root и group = root. Итак, их можно извлечь с помощью такой команды, как

gzip -dc cyr-rfx_ENCODING-1.1.tgz | tar xf — -C / usr / X11R6 / lib / X11 / fonts /

Подробные инструкции по установке доступны в doc / INSTALL.en.txt.

Шрифты в исходном формате (BDF) доступны в каталоге srctgz / dir.

См. Также doc / ChangeLog.

Контактная информация

Главная страница CYR-RFX находится по адресу

http: // www.inp.nsk.su/~bolkhov/files/fonts/cyr-rfx/00index.en.html

Он также доступен в ftp-пространстве как

ftp://ftp.inp.nsk.su/pub/BINP/X11/fonts/cyr-rfx/00index.en.html

Если вы обнаружите какие-либо ошибки, напишите мне, Дмитрий Болховитянов: mailto: [email protected].

Авторские права и лицензия

Все шрифты сохраняют ту же лицензионную политику, что и исходные (iso8859-1) шрифты.

Стандартные шрифты iso8859-1 Courier, Helvetica и Times авторское право принадлежит Adobe Systems и Digital Equipment Corporation (см. CHT_LEGALNOTICE).

Стандартные шрифты iso8859-1 LucidaSans и LucidaSansTypewriter являются авторские права принадлежат Bigelow & Holmes (см. LU_LEGALNOTICE).

Стандартные шрифты iso8859-1 misc / {12×24,8×16} авторские права принадлежат Sony Corp (см. SONY_LEGALNOTICE).

Авторские права на стандартный шрифт iso8859-1 misc / 10×20 принадлежат Network Computing Devices, Inc. (см. NCD_LEGALNOTICE).

Стандартный шрифт iso8859-1 misc / 5×7 принадлежит X Консорциум (см. 5X7_LEGALNOTICE).

Остальные стандартные iso8859-1 разное / шрифты (6×10, 6×13, 6х13Б, 7×13, 7x13B, 7×14, 7x14B, 8×13, 8x13B, 9×15, 9х15Б, nil2) являются собственностью различных людей и организаций (см. свойства «АВТОРСКИЕ ПРАВА» отдельных шрифтов) и являются общедоступные шрифты.

Кириллица и евроглифы во всех этих шрифтах, а также линейный рисунок глифов в 75dpi / шрифтах, а также в дистрибутиве CYR-RFX и Авторские права на логотип «CYR-RFX» принадлежат Дмитрию Болховитянову. (см. CYR-RFX_LEGALNOTICE).

---

Copyright © 2000, Дмитрий Ю. Болховитянов

шрифтов

шрифтов

---

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

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

1. Пользовательский агент создает (или получает доступ) базу данных соответствующего CSS 2.1. свойства всех шрифтов, о которых знает UA. Если есть два шрифта с одинаковыми свойствами, пользователь агент выбирает один из них.
2. Для данного элемента и для каждого символа в этом элементе UA собирает свойства шрифта, применимые к этому элементу. С помощью полный набор свойств, UA использует свойство font-family для выберите предварительное семейство шрифтов. Остальные свойства проверены против семьи в соответствии с критериями соответствия, описанными в каждое свойство.Если есть совпадения по всем остальным свойствам, тогда это совпадающее начертание шрифта для данного элемента или символа.
3. Если в семействе «font-family» нет подходящего начертания шрифта обрабатывается на шаге 2, и если есть следующая альтернатива ‘font-family’ в наборе шрифтов, затем повторите шаг 2 со следующей альтернативой ‘семейство шрифтов’.
4. Если есть совпадающее начертание шрифта, но оно не содержит глифа для текущего персонажа, и если есть следующая альтернатива ‘font-family’ в наборах шрифтов, затем повторите шаг 2 со следующим альтернативное «семейство шрифтов».
5. Если в семействе, выбранном в 2, нет шрифта, используйте «Font-family» по умолчанию, зависящий от UA, и повторите шаг 2, используя лучшее совпадение, которое может быть получено в пределах шрифта по умолчанию. Если конкретный символ не может быть отображен с использованием этого шрифта, тогда UA может использовать другой означает определение подходящего шрифта для этого символа. UA должен отобразить каждый символ, для которого нет подходящего шрифта для видимого символа выбранный UA, предпочтительно глиф «отсутствующего символа» из одного из шрифты, доступные для UA.

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

Правила сопоставления по свойствам из пункта (2) выше следующие:

1. ‘font-style’ сначала пробуется. «Курсив» будет удовлетворен, если в базе данных шрифтов UA есть лицо помечены ключевым словом CSS «курсив» (предпочтительно) или «наклонный». В противном случае значения должны быть точно сопоставлены, иначе стиль шрифта не будет работать.
Далее выполняется попытка
2. ‘font-option’.Спички с маленькой заглавной буквы (1) a шрифт, помеченный как ‘small-caps’, (2) шрифт, в котором маленькие заглавные буквы синтезированный, или (3) шрифт, в котором все строчные буквы заменены на заглавные буквы. Шрифт с маленькими заглавными буквами может быть синтезирован электронное масштабирование заглавных букв обычного шрифта. ‘normal’ соответствует нормальному варианту шрифта (не с маленькими заглавными буквами). У шрифта не может быть нормального варианта. Шрифт который доступен только в виде маленьких заглавных букв, должен выбираться как «нормальное» лицо или как «малое заглавное» лицо.
3. ‘font-weight’ соответствует следующему, он будет никогда не подведи. (См. «Font-weight» ниже.)
4. ‘font-size’ должен соответствовать в пределах Предел допуска, зависящий от UA. (Обычно размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, а допуск для растровые шрифты могут достигать 20%.) Дальнейшие вычисления, например, значениями ’em’ в других свойствах, основаны на вычисленное значение font-size.

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

body {font-family: Gill, Helvetica, sans-serif}
 

Хотя многие шрифты содержат глиф «недостающий символ», обычно это открытый ящик, поскольку его название подразумевает, что это не должно быть считается совпадением для символов, которых нет в шрифте. (Должно, однако считается соответствием U + FFFD, «отсутствующий символ» код символа).

Существует два типа названий семейств шрифтов:

<фамилия>

Название выбранного семейства шрифтов.В последнем примере «Гилл» и «Helvetica» — семейства шрифтов.

<родовое-семейство>

В приведенном выше примере последнее значение является родовым именем семейства. В определены следующие общие семейства:

• ‘serif’ (например, Times)
• ‘без засечек’ (например, Helvetica)
• ‘курсив’ (например, Zapf-Chancery)
• «фэнтези» (например, вестерн)
• ‘моноширинный’ (например, Courier)

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

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

Например, следующие объявления недействительны:

семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек;
 

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

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

body {font-family: "New Century Schoolbook", serif}

<ТЕЛО>
 

Семейство шрифтов имен , которые совпадают с ключевым словом значение (‘наследование’, ‘с засечками’, ‘без засечек’, ‘моноширинный’, ‘фантазия’ и ‘cursive’) необходимо заключить в кавычки, чтобы избежать путаницы с ключевыми словами с те же имена. Ключевые слова initial и default зарезервированы для для будущего использования и также должны быть указаны в кавычках при использовании в качестве названия шрифта.UA должны не рассматривать эти ключевые слова как совпадающие с ‘‘ тип.

15.3.1 Общие семейства шрифтов

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

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

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

15.3.1.1

serif

Символы шрифтов с засечками, как этот термин используется в CSS, имеют тенденцию к завершению. штрихи, расклешенные или сужающиеся концы или имеющие окончание с засечками (включая плоские засечки).Шрифты с засечками обычно пропорционально разнесены. Они часто демонстрируют большую разницу между толстые и тонкие штрихи, чем шрифты из общего шрифта ‘sans-serif’ семья. CSS использует термин ‘serif’ для применения к шрифту любого скрипта, хотя для конкретных сценариев могут быть более знакомы другие имена, например как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, описанный таким образом, может использоваться для обозначения родовое семейство ‘serif’.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	Times New Roman, Бодони, Гарамонд, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты	Bitstream Cyberbit
Кириллические шрифты	Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Монотипия Альбион 70, Bitstream Cyberbit, ER Bukinist
Еврейские шрифты	New Peninim, Raanana, Bitstream Cyberbit
Японские шрифты	Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Арабские шрифты	Bitstream Cyberbit
Шрифты Cherokee	Lo Cicero Cherokee

15.3.1.2

sans-serif

Глифы в шрифтах без засечек, поскольку этот термин используется в CSS, обычно имеют обводку гладкие окончания — с небольшим или без развальцовки, поперечного штриха и т. д. орнамент. Шрифты без засечек обычно пропорционально разнесены. У них часто есть небольшие различия между толстыми и тонкие штрихи по сравнению со шрифтами из семейства «serif». CSS использует термин «без засечек» для применения к шрифту для любого шрифта, хотя другие имена могут быть более знакомы для конкретных сценариев, например Готический (японский), Кай (китайский) или Патанг (корейский).Любой шрифт, описанный таким образом, может использоваться для обозначения общего «без засечек» семья.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты	Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические шрифты	Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские шрифты	Arial Hebrew, MS Tahoma
Японские шрифты	Shin Go, Heisei Kaku Gothic W5
Арабские шрифты	MS Tahoma

15.3.1.3

cursive

Глифы курсивным шрифтом, как этот термин используется в CSS, обычно имеют либо присоединение штрихов, либо другие характеристики курсива, помимо тех курсивных шрифтов. Глифы частично или полностью связаны, и результат больше похож на рукописную ручку или кисть письмо, чем печатное письмо. Шрифты для некоторых скриптов, например Арабский, почти всегда пишется курсивом. CSS использует термин «курсив» для применять к шрифту для любого скрипта, хотя другие названия, такие как Chancery, Кисть, Swing и Script также используются в названиях шрифтов.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллические шрифты	ER Architekt
Еврейские шрифты	Корсива
Арабские шрифты	DecoType Naskh, монотипия урду 507

15.3.1.4

фэнтези

Фэнтезийные шрифты, используемые в CSS, в основном являются декоративными, в то время как все еще содержащие представления символов (в отличие от Пи или Графические шрифты, которые не представляют символы).Примеры включают:

латинские шрифты

Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

15.3.1.5

моноширинный

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

Примеры шрифтов, соответствующих этому описанию, включают:

Латинские шрифты	Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты	MS Courier New, Everson Mono
Кириллические шрифты	ER Kurier, Everson Mono
Японские шрифты	Осака моноширинный
Шрифты Cherokee	Эверсон Моно

‘font-style’

Значение:	нормальное | курсив | косой | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

Свойство font-style выбирает между обычным (иногда называемые «римские» или «вертикальные»), курсив и наклонные начертания внутри семейство шрифтов.

Значение «нормальный» выбирает шрифт, который классифицируется как «нормальный». в базе данных шрифтов UA, в то время как ‘oblique’ выбирает шрифт, который помечены как «наклонные». Значение «курсив» выбирает шрифт, который помечен «курсив» или, если он недоступен, помеченный как «наклонный».

Шрифт, помеченный как «наклонный» в базе данных шрифтов UA, может фактически были созданы путем электронного наклона обычного шрифта.

Шрифты с наклонными, наклонными или наклонными названиями будут обычно обозначается как «наклонный» в базе данных шрифтов UA.Шрифты с Курсив, Курсив или Курсив в их именах будет обычно обозначается курсивом.

h2, h3, h4 {font-style: italic}
h2 em {font-style: normal}
 

В приведенном выше примере выделенный текст в ‘h2’ появится в нормальное лицо.

‘вариант шрифта’

Значение:	нормальное | малые шапки | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

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

Значение ‘normal’ выбирает шрифт, который не является шрифтом с маленькими заглавными буквами, ‘small-caps’ выбирает шрифт small-caps. Это приемлемо (но не требуется) в CSS 2.1, если шрифт с маленькими заглавными буквами создается с помощью обычный шрифт и замена строчных букв масштабированными прописными символы. В крайнем случае будут использоваться прописные буквы в качестве замена капельного шрифта.

Следующий пример приводит к элементу ‘h4’ в малых заглавных буквах, с любыми подчеркнутыми словами наклонными и любыми подчеркнутыми словами внутри и наклонные малые заглавные буквы ‘h4’:

h4 {font-variant: small-caps}
em {font-style: oblique}
 

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

Примечание: , поскольку это свойство приводит к тому, что текст преобразовано в верхний регистр, применяются те же соображения, что и для ‘text-transform’.

‘font-weight’

Значение:	нормальное | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Текст

Свойство font-weight выбирает толщину шрифта.В значения от ‘100’ до ‘900’ образуют упорядоченную последовательность, где каждое число указывает на вес, который по крайней мере такой же темный, как и его предшественник. В ключевое слово «нормальный» является синонимом «400», а «жирный» — синонимом. с «700». Ключевые слова, отличные от «нормального» и «жирного», были показаны часто путают с названиями шрифтов, поэтому числовая шкала выбран для списка из 9 значений.

p {font-weight: normal} / * 400 * /
h2 {font-weight: 700} / * полужирный * /
 

Значения «жирнее» и «светлее» выбирают толщину шрифта, относительно веса, унаследованного от родителя:

сильный {font-weight: bolder}
 

Шрифты (данные шрифта) обычно имеют одно или несколько свойств, значения — это имена, которые описывают «вес» шрифта.Там не имеет общепринятого универсального значения для этих названий веса. Их основные роль заключается в том, чтобы различать лица разной темноты в одном семейство шрифтов. Использование разных семейств шрифтов весьма вариативно; Например, шрифт, который можно было бы назвать жирным, можно описать как быть Regular, Roman, Book, Medium, Semi- или DemiBold, Полужирный, или Черный, в зависимости от того, насколько черным «нормальное» лицо шрифта в дизайне. Потому что нет стандартного использования имен, значения свойств веса в CSS 2.1 даны на числовом шкала, в которой значение «400» (или «нормальный») соответствует «нормальное» текстовое лицо для этой семьи. Название веса, связанное с это лицо обычно будет Книжный, Обычный, Римский, Обычный или иногда Средний .

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

• Если в семействе шрифтов уже используется числовая шкала с девятью значениями (например, e.g., OpenType делает), вес шрифта должен быть сопоставлен напрямую.
• Если есть лицо с меткой Среднее и лицо с меткой Книжный, Обычный, Римский или Обычный, , затем Средний обычно присваивается «500».
• Шрифт с надписью «Полужирный» часто соответствует значению веса «700».

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

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

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

Предположим, что у семейства «Гремучая змея» четыре веса, от самого легкого до самый темный: Обычный, Средний, Полужирный, Плотный.

9075 Rattlesnake Bold »

Первый пример отображения веса шрифта

Доступные грани	Назначения	Заполнение отверстий
«Rattlesnake Regular»	400	100, 200, 300
«Rattlesnake	Medium»			700	600
« Rattlesnake Heavy »	800	900

Предположим, что в Семейство «Ice Prawn»: Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание, что в этом случае пользовательский агент решил , а не присвоить числовой значение «Ice Prawn ExtraBlack».

9075 Ice Prawn Extra

Второй пример отображения веса шрифта

Доступные грани	Назначения	Заполнение отверстий
«Ice Prawn Book»	400	100, 200, 300
«Ice Prawn Medium»	500 9075 9075	«Ice Prawn Bold»	700	600
«Ice Prawn Heavy»	800
«Ice Prawn Black»	900
(нет)

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

Значения «смелее» и «светлее»

Унаследованное значение	жирный	зажигалка
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

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

Нет гарантии, что будет более темное лицо для каждого из значения ‘font-weight’; например, некоторые шрифты могут иметь только нормальное и жирное лицо, в то время как у других может быть восемь толщин лица. Нет никакой гарантии, как UA будет отображать шрифты внутри семейства. к значениям веса. Единственная гарантия — это то, что лицо заданной стоимости будет не менее темным, чем грани более светлых оттенков.

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

<абсолютный размер>

Ключевое слово — это индекс таблицы шрифтов. размеры рассчитываются и хранятся UA. Возможные значения:

[xx-маленький | x-small | маленький | средний | большой | x-большой | xx-большой]

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

Значения абсолютного размера CSS	xx-малый	x-маленький	малый	средний	большой	x-большой	хх большой
Размер шрифта HTML	1		2	3	4	5	6	7

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

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

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

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

<относительный размер>

Ключевое слово интерпретируется относительно таблица размеров шрифта и размера шрифта родительского элемента.Возможный значения: [больше | меньше]. Например, если родительский элемент имеет размер шрифта «средний», значение «больше» сделает шрифт размер текущего элемента должен быть «большим». Если размер родительского элемента не близок к записи в таблице, UA может интерполировать между таблицы или округлить до ближайшего. UA, возможно, придется экстраполировать значения таблицы, если числовое значение выходит за пределы ключевые слова.

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

Отрицательные значения не допускаются.

Во всех остальных свойствах значения длины em и ex относятся к вычисленный размер шрифта текущего элемента. В свойстве font-size эти Единицы длины относятся к вычисленному размеру шрифта родительского элемента.

Обратите внимание, что приложение может повторно интерпретировать явный размер, в зависимости от контекста. Например, внутри сцены VR шрифт может получить разный размер из-за искажения перспективы.

Примеры:

п {размер шрифта: 16 пикселей; }
@media print {
п {размер шрифта: 12 пт; }
}
цитата {font-size: больше}
em {размер шрифта: 150%}
em {размер шрифта: 1.5em}
 

Свойство ‘font’: за исключением описанного ниже, сокращенное свойство для параметр ‘стиль шрифта’, ‘вариант-шрифта’, ‘font-weight’, ‘размер шрифта’, ‘line-height’ и ‘font-family’ одновременно место в стиле простынь. Синтаксис этого свойства основан на традиционном типографская сокращенная запись для установки нескольких свойств, связанных с шрифты.

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

p {font: 12px / 14px без засечек}
п {шрифт: 80% без засечек}
p {font: x-large / 110% "New Century Schoolbook", serif}
p {шрифт: полужирный курсив, большой Palatino, serif}
p {font: normal, small-caps 120% / 120% fantasy}
 

Во втором правиле процентное значение размера шрифта (‘80%’) относится к к размеру шрифта родительского элемента. В третьем правиле строка процент высоты относится к размеру шрифта самого элемента.

В первых трех правилах выше «стиль шрифта», «вариант шрифта» и font-weight явно не упоминаются, что означает, что они все три установлены на свое начальное значение («нормальное»). Четвертый набор правил font-weight на bold, font-style на italic и неявно устанавливает для ‘font-option’ значение ‘normal’.

Пятое правило устанавливает ‘font-option’ (‘small-caps’), ‘font-size’ (120% родительского шрифта), ‘line-height’ (120% раз размер шрифта) и «font-family» («фантазия»).Отсюда следует, что ключевое слово ‘normal’ применяется к двум оставшимся свойствам: ‘font-style’ и font-weight.

Следующие значения относятся к системным шрифтам:

caption

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

значок

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

меню

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

окно сообщений

Шрифт, используемый в диалоговых окнах.

small-caption

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

строка состояния

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

Системные шрифты можно устанавливать только целиком; то есть шрифт семья, размер, вес, стиль и т. д. настраиваются одновременно. При желании эти значения затем могут быть изменены индивидуально. Если нет шрифт с указанными характеристиками существует на данной платформе, пользовательский агент должен либо разумно заменить (например, меньший версия шрифта ‘caption’ может использоваться для ‘small-caption’ font) или замените шрифт пользовательского агента по умолчанию.Что касается обычных шрифтов, если для системного шрифта какие-либо отдельные свойства не являются частью доступных пользовательских настроек операционной системы, эти свойства должны быть установлены на их начальные значения.

Вот почему это свойство является «почти» сокращенным свойством: system шрифты могут быть указаны только с этим свойством, а не с самим ‘font-family’, поэтому ‘font’ позволяет авторам делать больше, чем сумма его подсвойств. Однако отдельным свойствам, таким как font-weight, по-прежнему присваиваются значения, взятые из системного шрифта, которые можно изменять независимо.

Примеры:

button {font: 300 italic 1.3em / 1.7em "FB Armada", sans-serif}
кнопка p {font: menu}
кнопка p em {font-weight: bolder}
 

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

кнопка p {font: 600 9px Charcoal}
 

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

button p {
  семейство шрифтов: Уголь;
  стиль шрифта: нормальный;
  вариант шрифта: нормальный;
  font-weight: 600;
  размер шрифта: 9 пикселей;
  высота строки: нормальный;
}
 

---

Коды символов | Стили CSS, шрифты и Unicode

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

Вестерн

Базовая поддержка и расширенная поддержка Synbols

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

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

Смешанные шрифты в браузерах

Но не ВСЕ шрифты поддерживают ВСЕ возможные символы.

Во многих браузерах, когда символ недоступен в определенном шрифте, браузер может заменить его другим шрифтом. Ниже приведен пример случая, когда фонетический символ, schwa / ə / или перевернутый e заменяется с Arial Black на другой шрифт.

Arial Black: символ Schwa / ə / против «e»

Поиск подходящих шрифтов

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

CSS для указания шрифта

В приведенном ниже примере показан пример того, как указать шрифт с использованием семейства шрифтов в атрибуте CSS, чтобы гарантировать единообразное отображение символов IPA. Для получения дополнительной информации см. Страницу CSS-шрифтов W3C Schools.

Спецификация семейства шрифтов

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

HTML

style = "font-family: Arial" > Arial: символ Schwa / ə / vs. "e"

Результат

Arial: символ Schwa / ə / vs. «e»

Класс CSS

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

В следующем примере определяется класс для неанглийского текста с несколькими вариантами шрифта.

CSS

.utf8sans {"Lucida Grande", "Arial Unicode MS", без засечек}

HTML

Опять.

Незападные шрифты и размер

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

Несколько скриптов размером 1 em против 1,5 em

Скрипт	1 выс.	1,5 см
Кириллица	Українська	Українська
Греческий	ελληνικά	ελληνικά
Корейский	한국어	한국어
Деванагари	देवनागरी	देवनागरी
Традиционный китайский	漢語	漢語

В приведенной выше таблице больший размер указан как font-size: 1.5em или в 1,5 раза больше, чем базовый размер 1 em, используемый в западном тексте. В зависимости от ваших потребностей вы также можете указать конкретный размер шрифта (например, размер шрифта : 18pt, ).

CSS по языку

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

CSS

: lang (es) {font-weight: bold; стиль шрифта: курсив; цвет: # 009}

HTML

Он заказал arroz con pollo (курица и рис) на обед в мексиканском ресторане.

Результат

Он заказал arroz con pollo на обед в мексиканском ресторане.

CSS-кнопки

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

ПСУ

.fakebutton {color: # 69F; font-weight: жирный; размер шрифта: xx-large; Семейство шрифтов
: «Times CY», «Times New Roman», «Times», засечки;
цвет фона: # 009; отступ: 5 пикселей 10 пикселей; маржа слева: 30 пикселей;
граница: сплошная 4px # 69F; выравнивание текста: центр; width: 100px;}

class = "fakebutton" > ПСУ

Начало страницы

.