Символы HTML уроки для начинающих академия
Коды символов HTML
Коды HTML были описаны в предыдущей главе.
Многие математические, технические и Денежные символы, не присутствуют на обычной клавиатуре.
Чтобы добавить такие символы на HTML-страницу, можно использовать имя Коды HTML.
Если имя Коды не существует, можно использовать номер Коды, десятичную или шестнадцатеричную ссылку.
Пример
<p>Будут отображать €</p>
<p>Будут отображать €</p>
<p>Будут отображать €</p>
Будет отображаться как:
Будут отображать €
Будут отображать €
Будут отображать €
Некоторые математические символы, поддерживаемые HTML
Char | Number | Entity | Описание |
---|---|---|---|
∀ | ∀ | ∀ | Для всех |
∂ | ∂ | ∂ | Частичный дифференциал |
∃ | ∃ | ∃ | Существует |
∅ | ∅ | ∅ | Пустые наборы |
∇ | ∇ | ∇ | Набла |
∈ | ∈ | ∈ | Элемент |
∉ | ∉ | ∉ | Не является элементом |
∋ | ∋ | ∋ | Содержит в качестве члена |
∏ | ∏ | ∏ | N-арной продукт |
∑ | ∑ | ∑ | N-арное суммирование |
Полная математическая Справка
Некоторые греческие буквы, поддерживаемые HTML
Char | Number | Entity | Описание |
---|---|---|---|
Α | Α | Α | Греческая прописная буква альфа |
Β | Β | Β | Греческая прописная буква бета |
Γ | Γ | Γ | Греческая прописная буква гамма |
Δ | Δ | Δ | Греческая буквица Дельта |
Ε | Ε | Ε | Греческая прописная буква Эпсилон |
Ζ | Ζ | Ζ | Греческая буквица Зета |
Полная греческая Справка
Некоторые другие коды, поддерживаемые HTML
Char | Number | Entity | Описание |
---|---|---|---|
© | © | © | Знак авторского права |
® | ® | ® | Зарегистрированный знак |
€ | € | € | Знак евро |
™ | ™ | ™ | Товарный знак |
← | ← | ← | Влево Стрелка |
↑ | ↑ | ↑ | Стрелка вверх |
→ | → | → | Стрелка вправо |
↓ | ↓ | ↓ | Стрелка вниз |
♠ | ♠ | ♠ | Черный костюм лопатой |
♣ | ♣ | ♣ | Черный клуб костюм |
♥ | ♥ | ♥ | Черное сердце костюм |
♦ | ♦ | ♦ | Черный костюм алмаза |
Справка по валютам
Справка по стрелкам
Справка по символам
Спецсимволы HTML и мнемоники
1
Типографика
Символ | Мнемоника | Описание | |
---|---|---|---|
|
  |
Неразрывный пробел | |
  |
  |
Узкий пробел | |
  |
  |
Широкий пробел | |
– | – |
– |
Узкое тире |
— | — | — |
Широкое тире |
| ­ |
­ |
Мягкий перенос |
́ | ́ |
Ударение | |
© | © |
© |
Копирайт |
® | ® |
® |
Зарегистрированная торговая марка |
™ | ™ |
™ |
|
º | º |
º |
Копье Марса |
ª | ª |
ª |
Зеркало Венеры |
‰ | ‰ |
‰ |
Промилле |
π | π |
π |
Пи |
¦ | ¦ |
¦ |
Вертикальный пунктир |
§ | § |
§ |
Параграф |
° | ° |
° |
Градус |
µ | µ |
µ |
Знак «микро» |
¶ | ¶ |
¶ |
Знак абзаца |
… | … |
… |
Многоточие |
‾ | ‾ |
‾ |
Надчеркивание |
´ | ´ |
´ |
Ударение |
№ | № |
Номер | |
🔍 | 🔍 |
Лупа (наклонённая влево) | |
🔎 | 🔎 |
Лупа (наклонённая вправо) | |
& | & |
& |
Амперсанд |
2
Кавычки
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
« | " |
" |
Двойная кавычка |
« | « |
« |
Левая кавычка-елочка |
» | » |
» |
Правая кавычка-елочка |
‹ | ‹ |
Одиночная угловая кавычка открывающая | |
› | › |
Одиночная угловая кавычка закрывающая | |
′ | ′ |
′ |
Штрих (минуты, футы) |
″ | ″ |
″ |
Двойной штрих (секунды, дюймы) |
‘ | ‘ |
‘ |
|
’ | ’ |
’ |
Правая верхняя одиночная кавычка |
‚ | ‚ |
‚ |
Правая нижняя одиночная кавычка |
“ | “ |
“ |
Кавычка-лапка левая |
” | ” |
” |
Кавычка-лапка правая верхняя |
„ | „ |
„ |
Кавычка-лапка правая нижняя |
❛ | ❛ |
Одиночная английская кавычка открывающая | |
❜ | ❜ |
Одиночная английская кавычка закрывающая | |
❝ | ❝ |
Двойная английская кавычка открывающая | |
❞ | ❞ |
Двойная английская кавычка закрывающая |
3
Валюты
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
¤ | ¤t; |
¤ |
Знак валюты |
€ | € |
€ |
Евро |
¢ | ¢ |
¢ |
Цент |
£ | £ |
£ |
Фунт |
¥ | ¥ |
¥ |
Йена и Юань |
ƒ | ƒ |
ƒ |
Знак флорина |
4
Знаки математических операций
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
× | × |
× |
Умножить |
÷ | ÷ |
÷ |
Разделить |
< | < |
< |
Меньше |
> | > |
> |
Больше |
± | ± |
± |
Плюс/минус |
¹ | ¹ |
¹ |
Степень 1 |
² | ² |
² |
Степень 2 |
³ | ³ |
³ |
Степень 3 |
¬ | ¬ |
¬ |
Отрицание |
¼ | ¼ |
¼ |
Одна четвертая |
½ | ½ |
½ |
Одна вторая |
¾ | ¾ |
¾ |
Три четверти |
⁄ | ⁄ |
⁄ |
Дробная черта |
− | − |
− |
Минус |
≤ | ≤ |
≤ |
Меньше или равно |
≥ | ≥ |
≥ |
Больше или равно |
≈ | ≈ |
≈ |
Приблизительно |
≠ | ≠ |
≠ |
Не равно |
≡ | ≡ |
≡ |
Тождественно |
√ | √ |
√ |
Квадратный корень |
∞ | ∞ |
∞ |
Бесконечность |
∑ | ∑ |
∑ |
Сумма, сумма ряда |
∏ | ∏ |
∏ |
Произведение |
∂ | ∂ |
∂ |
Частичный дифференциал |
∫ | ∫ |
∫ |
Интеграл |
∀ | ∀ |
∀ |
Для всех |
∃ | ∃ |
∃ |
Существует |
∅ | ∅ |
∅ |
Пустое множество |
Ø | Ø |
Ø |
Диаметр |
∈ | ∈ |
∈ |
Принадлежит |
∉ | ∉ |
∉ |
Не принадлежит |
∋ | ∋ |
∗ |
Содержит |
⊂ | ⊂ |
⊂ |
Является подмножеством |
⊃ | ⊃ |
⊃ |
Является надмножеством |
⊄ | ⊄ |
⊄ |
Не является подмножеством |
⊆ | ⊆ |
⊆ |
Является подмножеством либо равно |
⊇ | ⊇ |
⊇ |
Является надмножеством либо равно |
⊕ | ⊕ |
⊕ |
Плюс в кружке |
⊗ | ⊗ |
⊗ |
Знак умножения в кружке |
⊥ | ⊥ |
⊥ |
Перпендикулярно |
∠ | ∠ |
∠ |
Угол |
∧ | ∧ |
∧ |
Логическое И |
∨ | ∨ |
∨ |
Логическое ИЛИ |
∩ | ∩ |
∩ |
Пересечение |
∪ | ∪ |
∪ |
Объединение |
5
Стрелки
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
← | ← |
← |
Стрелка влево |
↑ | ↑ |
↑ |
Стрелка вверх |
→ | → |
→ |
Стрелка вправо |
↓ | ↓ |
↓ |
Стрелка вниз |
↔ | ↔ |
↔ |
Стрелка влево и вправо |
↕ | ↕ |
Стрелка вверх и вниз | |
↵ | ↵ |
↵ |
Возврат каретки |
⇐ | ⇐ |
⇐ |
Двойная стрелка влево |
⇑ | ⇑ |
⇑ |
Двойная стрелка вверх |
⇒ | ⇒ |
⇒ |
Двойная стрелка вправо |
⇓ | ⇓ |
⇓ |
Двойная стрелка вниз |
⇔ | ⇔ |
⇔ |
Двойная стрелка влево и вправо |
⇕ | ⇕ |
Двойная стрелка вверх и вниз | |
▲ | ▲ |
Треугольная стрелка вверх | |
▼ | ▼ |
Треугольная стрелка вниз | |
► | ► |
Треугольная стрелка вправо | |
◄ | ◄ |
Треугольная стрелка влево |
6
Маркеры
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
• | • |
• |
Простой маркер |
○ | ○ |
Круг | |
· | · |
· |
Средняя точка |
† | † |
Крестик | |
‡ | ‡ |
Двойной крестик | |
♠ | ♠ |
♠ |
Пики |
♣ | ♣ |
♣ |
Трефы |
♥ | ♥ |
♥ |
Червы |
♦ | ♦ |
♦ |
Бубны |
◊ | ◊ |
◊ |
Ромб |
✏ | ✏ |
Карандаш | |
✎ | ✎ |
Карандаш | |
✐ | ✐ |
Карандаш | |
✍ | ✍ |
Рука |
7
Часы, время
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
⏰ | ⏰ |
Часы | |
⌚ | ⌚ |
Часы | |
⌛ | ⌛ |
Песочные часы | |
⏳ | ⏳ |
Песочные часы |
8
Звездочки, снежинки
Символ | Мнемоника | Код символа | Описание |
---|---|---|---|
☃ | ☃ |
Снеговик | |
❄ | ❄ |
Снежинка | |
❅ | ❅ |
Зажатая трилистниками снежинка | |
❆ | ❆ |
Жирная остроугольная снежинка | |
★ | ★ |
Закрашенная звезда | |
☆ | ☆ |
Незакрашенная звезда | |
✪ | ✪ |
Незакрашенная звезда в закрашенном круге | |
✫ | ✫ |
Закрашенная звезда с незакрашенным кругом внутри | |
✯ | ✯ |
Вращающаяся звезда | |
⚝ | ⚝ |
Начерченная белая звезда | |
⚪ | ⚪ |
Средний незакрашенный круг | |
⚫ | ⚫ |
Средний закрашенный круг | |
⚹ | ⚹ |
Секстиле (типа снежинка) | |
✵ | ✵ |
Восьмиконечная вращающаяся звезда | |
❉ | ❉ |
Звёздочка с шарообразными окончаниями | |
❋ | ❋ |
Жирная восьмиконечная каплеобразная звёздочка-пропеллер | |
✺ | ✺ |
Шестнадцатиконечная звёздочка | |
✹ | ✹ |
Двенадцатиконечная закрашенная звезда | |
✸ | ✸ |
Жирная восьмиконечная прямолинейная закрашенная звезда | |
✶ | ✶ |
Шестиконечная закрашенная звезда | |
✷ | ✷ |
Восьмиконечная прямолинейная закрашенная звезда | |
✴ | ✴ |
Восьмиконечная закрашенная звезда | |
✳ | ✳ |
Восьмиконечная звёздочка | |
✲ | ✲ |
Звёздочка с незакрашенным центром | |
✱ | ✱ |
Жирная звёздочка | |
✧ | ✧ |
Заострённая четырёхконечная незакрашенная звезда | |
✦ | ✦ |
Заострённая четырёхконечная закрашенная звезда | |
⍟ | ⍟ |
Звезда в круге | |
⊛ | ⊛ |
Снежинка в круге |
Специальные символы в HTML
На странице html иногда надо вставить различные стрелки,кавычки,знаки и тд. Обычными средствами такие символы вставить нельзя. Чтобы вставить определённый символ в страницу, нужно вставить определенную ссылку-мнемонику.Не всякий шрифт отобразит символ. Следует обратить внимание на то что не все шрифты отображают символы корректно. Наиболее корректно отображают Arial ,Times New Roman.
Название | Код | Вид |
Неразрывный пробел | | |
Стрелка влево | < | < |
Стрелка вправо | > | > |
Стрелка вверх | ↑ | ↑ |
Стрелка вниз | ↓ | ↓ |
Стрелка влево-вправо | ↔ | ↔ |
Стрелка вниз с углом вправо | ↵ | ↵ |
Стрелка двойная влево | ⇐ | ⇐ |
Стрелка двойная вправо | ⇒ | ⇒ |
Амперсанд | & | & |
Квадрат | ² | ² |
Куб | ³ | ³ |
Параграф | § | § |
Знак copyright | © | © |
Градус | ° | ° |
Плюс минус | ± | ± |
Двойная угловая кавычка влево | « | « |
Двойная угловая кавычка вправо | » | » |
Одинарная кавычка | ' | ‘ |
Двойная кавычка | " | « |
Короткое тире | – | – |
Длинное тире | — | — |
Знак правовой охраны товарного знака | ® | ® |
Дробь «одна вторая» | ½ | ½ |
Дробь «одна четвёртая» | ¼ | ¼ |
Знак умножения | × | × |
Промилле | ‰ | ‰ |
Знак номера | № | № |
Минус | − | − |
Звёздочка(оператор) | ∗ | ∗ |
Точка(оператор) | ⋅ | ⋅ |
Пропорция | ∝ | ∝ |
Интеграл | ∫ | ∫ |
Квадратный корень | √ | √ |
Угол | ∠ | ∠ |
Бесконечность | ∞ | ∞ |
Векторное произведение | ⊗ | ⊗ |
Прямая сумма | ⊕ | ⊕ |
Штрих | ′ | ′ |
Товарный знак | ™ | ™ |
Символ цента | ¢ | ¢ |
Символ евро | € | € |
Символ фунта | £ | £ |
Символ иены | ¥ | ¥ |
Крест | † | † |
Знак масти пики | ♠ | ♠ |
Знак масти трефы | ♣ | ♣ |
Знак масти червы | ♥ | ♥ |
Знак масти бубны | ♦ | ♦ |
символ | html-код | десятичный код |
описание |
---|---|---|---|
|   | неразрывный пробел | |
  |   | узкий пробел (еn-шириной в букву n) | |
  |   | широкий пробел (em-шириной в букву m) | |
– | – | – | узкое тире (en-тире) |
— | — | — | широкое тире (em -тире) |
| ­ | ­ | мягкий перенос |
а́ | ́ | ударение, ставится после «ударной» буквы | |
© | © | © | копирайт |
® | ® | ® | знак зарегистрированной торговой марки |
™ | ™ | ™ | знак торговой марки |
º | º | º | копье Марса |
ª | ª | ª | зеркало Венеры |
‰ | ‰ | ‰ | промилле |
π | π | π | пи (используйте Times New Roman) |
¦ | ¦ | ¦ | вертикальный пунктир |
§ | § | § | параграф |
° | ° | ° | градус |
µ | µ | µ | знак «микро» |
¶ | ¶ | ¶ | знак абзаца |
… | … | … | многоточие |
‾ | ‾ | ‾ | надчеркивание |
´ | ´ | ´ | знак ударения |
№ | № | знак номера | |
🔍 | 🔍 | Лупа (наклонённая влево) | |
🔎 | 🔎 | Лупа (наклонённая вправо) | |
знаки арифметических и математических операций | |||
× | × | × | умножить |
÷ | ÷ | ÷ | разделить |
< | < | < | меньше |
> | > | > | больше |
± | ± | ± | плюс/минус |
¹ | ¹ | ¹ | степень 1 |
² | ² | ² | степень 2 |
³ | ³ | ³ | степень 3 |
¬ | ¬ | ¬ | отрицание |
¼ | ¼ | ¼ | одна четвертая |
½ | ½ | ½ | одна вторая |
¾ | ¾ | ¾ | три четверти |
⁄ | ⁄ | ⁄ | дробная черта |
− | − | − | минус |
≤ | ≤ | ≤ | меньше или равно |
≥ | ≥ | ≥ | больше или равно |
≈ | ≈ | ≈ | приблизительно (почти) равно |
≠ | ≠ | ≠ | не равно |
≡ | ≡ | ≡ | тождественно |
√ | √ | √ | квадратный корень (радикал) |
∞ | ∞ | ∞ | бесконечность |
∑ | ∑ | ∑ | знак суммирования |
∏ | ∏ | ∏ | знак произведения |
∂ | ∂ | ∂ | частичный дифференциал |
∫ | ∫ | ∫ | интеграл |
∀ | ∀ | ∀ | для всех (видно только если жирным шрифтом) |
∃ | ∃ | ∃ | существует |
∅ | ∅ | ∅ | пустое множество |
Ø | Ø | Ø | диаметр |
∈ | ∈ | ∈ | принадлежит |
∉ | ∉ | ∉ | не принадлежит |
∋ | ∋ | ∗ | содержит |
⊂ | ⊂ | ⊂ | является подмножеством |
⊃ | ⊃ | ⊃ | является надмножеством |
⊄ | ⊄ | ⊄ | не является подмножеством |
⊆ | ⊆ | ⊆ | является подмножеством либо равно |
⊇ | ⊇ | ⊇ | является надмножеством либо равно |
⊕ | ⊕ | ⊕ | плюс в кружке |
⊗ | ⊗ | ⊗ | знак умножения в кружке |
⊥ | ⊥ | ⊥ | перпендикулярно |
∠ | ∠ | ∠ | угол |
∧ | ∧ | ∧ | логическое И |
∨ | ∨ | ∨ | логическое ИЛИ |
∩ | ∩ | ∩ | пересечение |
∪ | ∪ | ∪ | объединение |
знаки валют | |||
€ | € | € | Евро |
¢ | ¢ | ¢ | Цент |
£ | £ | £ | Фунт |
¤ | ¤t; | ¤ | Знак валюты |
¥ | ¥ | ¥ | Знак йены и юаня |
ƒ | ƒ | ƒ | Знак флорина |
маркеры | |||
• | • | • | простой маркер |
○ | ○ | круг | |
· | · | · | средняя точка |
† | † | крестик | |
‡ | ‡ | двойной крестик | |
♠ | ♠ | ♠ | пики |
♣ | ♣ | ♣ | трефы |
♥ | ♥ | ♥ | червы |
♦ | ♦ | ♦ | бубны |
◊ | ◊ | ◊ | ромб |
✏ | ✏ | карандаш | |
✎ | ✎ | карандаш | |
✐ | ✐ | карандаш | |
✍ | ✍ | рука | |
кавычки | |||
» | " | " | двойная кавычка |
& | & | & | амперсанд |
« | « | « | левая типографская кавычка (кавычка-елочка) |
» | » | » | правая типографская кавычка (кавычка-елочка) |
‹ | ‹ | одиночная угловая кавычка открывающая | |
› | › | одиночная угловая кавычка закрывающая | |
′ | ′ | ′ | штрих (минуты, футы) |
″ | ″ | ″ | двойной штрих (секунды, дюймы) |
‘ | ‘ | ‘ | левая верхняя одиночная кавычка |
’ | ’ | ’ | правая верхняя одиночная кавычка |
‚ | ‚ | ‚ | правая нижняя одиночная кавычка |
“ | “ | “ | кавычка-лапка левая |
” | ” | ” | кавычка-лапка правая верхняя |
„ | „ | „ | кавычка-лапка правая нижняя |
❛ | ❛ | одиночная английская кавычка открывающая | |
❜ | ❜ | одиночная английская кавычка закрывающая | |
❝ | ❝ | двойная английская кавычка открывающая | |
❞ | ❞ | двойная английская кавычка закрывающая | |
стрелки | |||
← | ← | ← | стрелка влево |
↑ | ↑ | ↑ | стрелка вверх |
→ | → | → | стрелка вправо |
↓ | ↓ | ↓ | стрелка вниз |
↔ | ↔ | ↔ | стрелка влево и вправо |
↕ | ↕ | стрелка вверх и вниз | |
↵ | ↵ | ↵ | возврат каретки |
⇐ | ⇐ | ⇐ | двойная стрелка влево |
⇑ | ⇑ | ⇑ | двойная стрелка вверх |
⇒ | ⇒ | ⇒ | двойная стрелка вправо |
⇓ | ⇓ | ⇓ | двойная стрелка вниз |
⇔ | ⇔ | ⇔ | двойная стрелка влево и вправо |
⇕ | ⇕ | двойная стрелка вверх и вниз | |
▲ | ▲ | треугольная стрелка вверх | |
▼ | ▼ | треугольная стрелка вниз | |
► | ► | треугольная стрелка вправо | |
◄ | ◄ | треугольная стрелка влево | |
звездочки, снежинки | |||
☃ | ☃ | Снеговик | |
❄ | ❄ | Снежинка | |
❅ | ❅ | Зажатая трилистниками снежинка | |
❆ | ❆ | Жирная остроугольная снежинка | |
★ | ★ | Закрашенная звезда | |
☆ | ☆ | Незакрашенная звезда | |
✪ | ✪ | Незакрашенная звезда в закрашенном круге | |
✫ | ✫ | Закрашенная звезда с незакрашенным кругом внутри | |
✯ | ✯ | Вращающаяся звезда | |
⚝ | ⚝ | Начерченная белая звезда | |
⚪ | ⚪ | Средний незакрашенный круг | |
⚫ | ⚫ | Средний закрашенный круг | |
⚹ | ⚹ | Секстиле (типа снежинка) | |
✵ | ✵ | Восьмиконечная вращающаяся звезда | |
❉ | ❉ | Звёздочка с шарообразными окончаниями | |
❋ | ❋ | Жирная восьмиконечная каплеобразная звёздочка-пропеллер | |
✺ | ✺ | Шестнадцатиконечная звёздочка | |
✹ | ✹ | Двенадцатиконечная закрашенная звезда | |
✸ | ✸ | Жирная восьмиконечная прямолинейная закрашенная звезда | |
✶ | ✶ | Шестиконечная закрашенная звезда | |
✷ | ✷ | Восьмиконечная прямолинейная закрашенная звезда | |
✴ | ✴ | Восьмиконечная закрашенная звезда | |
✳ | ✳ | Восьмиконечная звёздочка | |
✲ | ✲ | Звёздочка с незакрашенным центром | |
✱ | ✱ | Жирная звёздочка | |
✧ | ✧ | Заострённая четырёхконечная незакрашенная звезда | |
✦ | ✦ | Заострённая четырёхконечная закрашенная звезда | |
⍟ | ⍟ | Звезда в круге | |
⊛ | ⊛ | Снежинка в круге | |
часы, время | |||
⏰ | ⏰ | Часы | |
⌚ | ⌚ | Часы | |
⌛ | ⌛ | Песочные часы | |
⏳ | ⏳ | Песочные часы |
Использование Unicode в HTML и CSS — Блог
Это небольшая заметка-памятка о том, как вводить нестандартные символы в HTML и CSS код.
Unicode и HTML
В HTML есть несколько способов включить символ в текст документа. Помимо непосредственного ввода символа можно использовать ссылки (character references). Ссылки могут быть десятичными, шестнадцатеричными или именованными.
Десятичные символьные ссылки
Возьмём произвольный символ Unicode, например, тильду (~). Её можно ввести с клавиатуры, но мы попробуем сделать это с помощью десятичной ссылки.
Код символа в таблице: U+007E.
Переводим в десятичный формат: 7E16 = 7*16 + 14 = 12610
Чтобы отобразить символ в HTML документе, нужно поместить его код между «&#» и «;».
<span>Это тильда: ~</span>
Шестнадцатеричные символьные ссылки
Аналогично десятичному представлению можно использовать шестнадцатеричное, добавим большую или малую латинскую «x» (икс) перед шестнадцатеричным кодом символа.
<span>Это тоже тильда: ~</span>
Через числовые ссылки можно сослаться на любой символ таблицы Unicode, за исключением символов с кодами U+0000 и U+000D, перманентно не определённых символов, суррогатов (U+D800–U+DFFF) и управляющих символов помимо пробельных.
Именованные символьные ссылки
В начале было слово.. (с)
А в нашем случае был метаязык SGML (Standard Generalized Markup Language), на котором определялись языки разметки документов. HTML до версии 4 включительно был приложением SGML, а XML является подмножеством SGML.
В частности, SGML помимо декларативной разметки и описания типов документов (document type definition, DTD), обладал механизмом строковой подстановки, когда некоторая последовательность символов заменяется при обработке некоторой другой последовательностью (для обеспечения переносимости нестандартных символов).
В SGML строки, для которых определены подстановки, назывались entities (иногда их переводят как «объекты», Википедия называет их «символ-мнемоника»). После того, как entities объявлен, на него можно ссылаться в любом месте документа, используя его имя, перед которым ставится символ «&», а после которого — точка с запятой. Точка с запятой может быть опущена, если за ссылкой на entities следует пробел или конец записи.
В HTML определено много entities для специальных символов, вроде валют и математических знаков, а также для отображения символов, имеющих специальное значение для HTML (например, < и >). Их описание можно найти на официальном сайте консорциума. Для HTML 4 пример описания дроби 3/4 (U+00BE) выглядит так:
<!ENTITY frac34 CDATA "¾" -- vulgar fraction three quarters
= fraction three quarters, U+00BE ISOnum -->
Затем символ можно использовать в документе:
<span>Платформа 9¾</span>
Такое описание выглядит нагляднее, но по факту просто заменяется на:
<span>Платформа 9¾</span>
Unicode и CSS
В CSS тоже можно обращаться к символам через их коды, но формат записи отличается от HTML. Код символа предваряется обратным слешем (\).
.test1:after {
content: "\7E";
}
<span>Это всё та же тильда:</span>
Подобным образом можно заэкранировать символ, имеющий специальное значение в CSS-разметке, например, кавычку:
.test2:after {
content: "\"Hello\"";
}
<span>Он сказал:</span>
Однако, если мы захотим написать «примерно 15км», то есть «~15км», такой код не сработает:
.test3:after {
content: "\7E15км";
}
<span>Расстояние:</span>
Поскольку символы, которые могут быть интерпретированы как шестнадцатеричные цифры (0-9, a-f, A-F), будут восприняты как часть кода символа. Есть два способа исправить ситуацию: поставить пробел после кода символа (этот первый пробел не будет отображён при выводе) или использовать 6-циферный код символа.
.test4:after {
content: "\7E 15км"; /* или "\00007E15км" */
}
Сводная табличка в качестве резюме:
Формат | Описание |
HTML | |
&#A9; | Десятичная ссылка (decimal numeric character reference) |
© | Шестнадцатеричная ссылка (hexadecimal numeric character reference) |
© | Именованная ссылка (мнемоника, HTML entity, named character reference) |
CSS | |
\A9 | Если после идёт символ из диапазона 0-9, a-f, A-F, перед ними нужен пробел |
\0000A9 | Код символа должен содержать ровно 6 символов, пробел после не нужен |
Ссылки
- Character entity references in HTML 4 (in HTML 5)
- Character references in HTML 4 (in HTML 5)
- Using character escapes in markup and CSS
Вид | HTML-код | CSS-код | Описание |
---|---|---|---|
| \00A0 | Неразрывный пробел | |
­ | \00AD | Место возможного переноса | |
< | < | \003C | Знак «меньше чем» (начало тега) |
> | > | \003E | Знак «больше чем» (конец тега) |
« | « | \00AB | Левая двойная угловая скобка |
» | » | \00BB | Правая двойная угловая скобка |
‹ | ‹ | \2039 | Левая угловая одиночная кавычка |
› | › | \203A | Правая угловая одиночная кавычка |
« | " | \0022 | Двойная кавычка |
′ | ′ | \2032 | Одиночный штрих |
″ | ″ | \2033 | Двойной штрих |
‘ | ‘ | \2018 | Левая одиночная кавычка |
’ | ’ | \2019 | Правая одиночная кавычка |
‚ | ‚ | \201A | Нижняя одиночная кавычка |
“ | “ | \201C | Левая двойная кавычка |
” | ” | \201D | Правая двойная кавычка |
„ | „ | \201E | Нижняя двойная кавычка |
❜ | ❜ | \275C | Жирная одинарная верхняя запятая |
❛ | ❛ | \275B | Жирная одинарная повёрнутая верхняя запятая |
& | & | \0026 | Амперсанд |
‘ | ' | \0027 | Апостроф (одинарная кавычка) |
§ | § | \00A7 | Параграф |
© | © | \00A9 | Знак copyright |
¬ | ¬ | \00AC | Знак отрицания |
® | ® | \00AE | Знак зарегистрированной торговой марки |
¯ | ¯ | \00AF | Знак долготы над гласным |
° | ° | \00B0 | Градус |
± | ± | \00B1 | Плюс-минус |
¹ | ¹ | \00B9 | Верхний индекс «1» |
² | ² | \00B2 | Верхний индекс «2» |
³ | ³ | \00B3 | Верхний индекс «3» |
¼ | ¼ | \00BC | Одна четверть |
½ | ½ | \00BD | Одна вторая |
¾ | ¾ | \00BE | Три четверти |
´ | ´ | \00B4 | Знак ударения |
µ | µ | \00B5 | Микро |
¶ | ¶ | \00B6 | Знак абзаца |
· | · | \00B7 | Знак умножения |
¿ | ¿ | \00BF | Перевернутый вопросительный знак |
ƒ | ƒ | \0192 | Знак флорина |
™ | ™ | \2122 | Знак торговой марки |
• | • | \2022 | Маркер списка |
… | … | \2026 | Многоточие |
‾ | ‾ | \203E | Надчеркивание |
– | – | \2013 | Среднее тире |
— | — | \2014 | Длинное тире |
‰ | ‰ | \2030 | Промилле |
} | } | \007D | Правая фигурная скобка |
{ | { | \007B | Левая фигурная скобка |
= | = | \003D | Знак равенства |
≠ | ≠ | \2260 | Знак неравенства |
≅ | ≅ | \2245 | Конгруэнтность (геометрическое равенство) |
≈ | ≈ | \2248 | Почти равно |
≤ | ≤ | \2264 | Меньше чем или равно |
≥ | ≥ | \2265 | Больше чем или равно |
∠ | ∠ | \2220 | Угол |
⊥ | ⊥ | \22A5 | Перпендикулярно (кнопка вверх) |
√ | √ | \221A | Квадратный корень |
∑ | ∑ | \2211 | N-ичное суммирование |
∫ | ∫ | \222B | Интеграл |
※ | ※ | \203B | Знак сноски |
÷ | ÷ | \00F7 | Знак деления |
∞ | ∞ | \221E | Знак бесконечности |
@ | @ | \0040 | Символ собака |
[ | [ | \005B | Левая квадратная скобка |
] | ] | \005D | Правая квадратная скобка |
html специальные символы отображаются в виде символов
Я пытался установить содержимое текстового ввода динамически с помощью JS, проблема, с которой я столкнулся, заключается в том, что я не могу заставить браузер отображать специальные символы, а не символы, например
document. getElementById("textField").value = "nbsp";
Вместо того чтобы отображать пробел, он отображает  , у кого-нибудь есть какие-нибудь идеи?
Большое спасибо
javascript html htmlspecialcharsПоделиться Источник user1935724 13 сентября 2013 в 06:49
5 ответов
- Специальные символы не отображаются в выводе pandoc html
Я пытаюсь получить специальные символы (для иностранных фамилий), работающие в pandoc. Я следовал инструкциям здесь и убедился, что все специальные символы представлены с использованием кодировки UTF (согласно этой странице . Я выбрал опцию HTML Entity (decimal). Результирующие файлы хорошо…
- специальные символы ç, ä отображаются как � в HTML
Я добавляю специальные символы ç, ä в свой HTML, и они отображаются как �. Я также использую utf-8 в своем HTML <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> Пожалуйста, подскажите мне, как отобразить эти специальные символы в HTML.
3
Похоже, что вы хотите ввести специальные символы, такие как пробел без разрыва, в строковый литерал JavaScript. Вы можете сделать это напрямую, при условии, что кодировка символов файла, содержащего код JavaScript, правильно объявлена, как и должно быть в любом случае:
document.getElementById("textField").value = ' ';
Здесь символ между апострофами-это настоящий символ без перерыва. В визуализации, это, как правило, ничем не отличается от обычного SPACE, но она имеет различные эффекты. Точно так же вы можете написать например
document.getElementById("textField").value = 'Ω';
используя греческую букву Омега напрямую.
Если вы не знаете, как вводить такие символы (например, через программу Windows CharMap) или если вы не можете контролировать проблемы с кодировкой символов, вы можете использовать escape-обозначения JavaScript Unicode для символов, например
document. getElementById("textField").value = '\u00A0'; // no-break space
или
document.getElementById("textField").value = '\u03A9'; // capital omega
Для небольшого набора символов с номерами Unicode меньше 0x100 вы можете альтернативно использовать \x
экранирования, например '\xA0'
вместо '\u00A0'
. (Но если вы этого не знали,то лучше научиться использовать универсальный \u
escape вместо этого.)
Поделиться Jukka K. Korpela 13 сентября 2013 в 10:22
1
-это сущность HTML, и вы не можете поместить сущность HTML в такое текстовое поле.
Попробуйте использовать unicode, например так:
document.getElementById("textField").value = '\xA0';
Поделиться Joe Simmons 13 сентября 2013 в 06:58
0
document.getElementById("textField").value = " ";
Поделиться Autocrab 13 сентября 2013 в 06:55
- Как отобразить специальные символы в html
У меня есть веб-страница, и вдруг она отображает специальные символы в виде азиатских символов, таких как отображается как это глава моего шаблона <!DOCTYPE html> <html lang=es> <head> <meta charset=utf-8> <title>Administrador</title> <!— no index —>…
- HTML специальные символы не отображаются должным образом
Я настроил VestaCP на 2 идентичных Debian 7 серверах. Незнакомцы на первом сервере специальные символы отображаются правильно из коробки, но на основном сервере специальные символы отображаются неправильно, вместо этого они дают черное ?. Оба сервера имеют точно такое же программное обеспечение и…
0
вы должны использовать » » вместо «nbsp»
Поделиться Unknown 13 сентября 2013 в 06:57
0
Как насчет использования jquery и этого:
$("#textField").html(' ').text()
Или в более общем плане:
$(element).html(encodedString).text()
Поделиться mhafellner 13 сентября 2013 в 06:59
Похожие вопросы:
Специальные символы в базе данных mysql
У меня есть база данных mysql с вопросами и ответами, которые отображаются в HTML абзацах и кнопках. q&a содержит много специальных символов, например é,…,’,, ö, а также некоторые теги html,…
Специальные символы отображаются на странице из базы данных, как это решить?
У меня есть страница, на которой извлекаются и отображаются данные. Но некоторые из символов отображаются как специальные символы Аналогично: Â, перевернутый вопрос и т. д… Я использую mysql db и…
импортированный шрифт не поддерживает специальные символы в html
я импортировал пользовательский шрифт в свой css. проблема в том, что специальные символы, такие как апострофы и запятые, не отображаются в html. моя идея состояла в том, чтобы сделать резервный…
Специальные символы не отображаются в выводе pandoc html
Я пытаюсь получить специальные символы (для иностранных фамилий), работающие в pandoc. Я следовал инструкциям здесь и убедился, что все специальные символы представлены с использованием кодировки…
специальные символы ç, ä отображаются как � в HTML
Я добавляю специальные символы ç, ä в свой HTML, и они отображаются как �. Я также использую utf-8 в своем HTML <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> Пожалуйста,…
Как отобразить специальные символы в html
У меня есть веб-страница, и вдруг она отображает специальные символы в виде азиатских символов, таких как отображается как это глава моего шаблона <!DOCTYPE html> <html lang=es>…
HTML специальные символы не отображаются должным образом
Я настроил VestaCP на 2 идентичных Debian 7 серверах. Незнакомцы на первом сервере специальные символы отображаются правильно из коробки, но на основном сервере специальные символы отображаются…
Все специальные символы являются вопросительными знаками в PHP/HTML
Php набор символов по умолчанию-UTF-8. Все специальные символы в PHP и HTML выводятся в браузере в виде вопросительного знака типа ?. Все данные со специальными символами хранятся как UTF-8 в полях…
как предотвратить кодировку html (специальные символы) в laravel?
Я сохранил некоторый код html в своей базе данных ( используя laravel 5.7, Sqlite ) он сохранился, но после этого я хочу показать его, laravel кодирует специальные символы. он должен вернуться в…
Специальные символы не отображаются правильно в заголовке кнопки html
Я знаю, что это очень простой вопрос, но мы на него наткнулись. У нас есть простая кнопка в файле HTML <button data-dojo-type=dijit/form/Button id=reset name=reset title=This is Reset…
HTML-символов, объектов, символов и кодов — HTML-стрелки
Стрелка влево
U + 02190
UNICODE
& # x2190;
ШЕСТИГРАННЫЙ КОД
& # 8592;
КОД HTML
& larr;
HTML ENTITY
\ 2190
Стрелка вверх
U + 02191
UNICODE
& # x2191;
ШЕСТИГРАННЫЙ КОД
& # 8593;
КОД HTML
& uarr;
HTML ENTITY
\ 2191
Стрелка вправо
U + 02192
UNICODE
& # x2192;
ШЕСТИГРАННЫЙ КОД
& # 8594;
КОД HTML
& rarr;
HTML ENTITY
\ 2192
Стрелка вниз
U + 02193
UNICODE
& # x2193;
ШЕСТИГРАННЫЙ КОД
& # 8595;
КОД HTML
& darr;
HTML ENTITY
\ 2193
North West Arrow
U + 02196
UNICODE
& # x2196;
ШЕСТИГРАННЫЙ КОД
& # 8598;
КОД HTML
& nwarr;
HTML ENTITY
\ 2196
North East Arrow
U + 02197
UNICODE
& # x2197;
ШЕСТИГРАННЫЙ КОД
& # 8599;
КОД HTML
& nearr;
HTML ENTITY
\ 2197
Юго-восточная стрелка
U + 02198
UNICODE
& # x2198;
ШЕСТИГРАННЫЙ КОД
& # 8600;
HTML-КОД
и поиск;
HTML ENTITY
\ 2198
Юго-Западная стрелка
U + 02199
UNICODE
& # x2199;
ШЕСТИГРАННЫЙ КОД
& # 8601;
КОД HTML
& swarr;
HTML ENTITY
\ 2199
Знак авторских прав
U + 000A9
UNICODE
& # xa9;
ШЕСТИГРАННЫЙ КОД
& # 169;
КОД HTML
& копия;
HTML ENTITY
\ 00A9
Знак зарегистрированной торговой марки
U + 000AE
UNICODE
& # xae;
ШЕСТИГРАННЫЙ КОД
& # 174;
КОД HTML
& reg;
HTML ENTITY
\ 00AE
Знак товарного знака
U + 02122
UNICODE
& # x2122;
ШЕСТИГРАННЫЙ КОД
& # 8482;
HTML КОД
& trade;
HTML ENTITY
\ 2122
с символом
U + 00040
UNICODE
& # x40;
ШЕСТИГРАННЫЙ КОД
& # 64;
КОД HTML
& commat;
HTML ENTITY
\ 0040
Ampersand
U + 00026
UNICODE
& # x26;
ШЕСТИГРАННЫЙ КОД
& # 38;
КОД HTML
& amp;
HTML ENTITY
\ 0026
Галочка
U + 02713
UNICODE
& # x2713;
ШЕСТИГРАННЫЙ КОД
& # 10003;
HTML КОД
& проверить;
HTML ENTITY
\ 2713
Градус Цельсия
U + 02103
UNICODE
& # x2103;
ШЕСТИГРАННЫЙ КОД
& # 8451;
HTML-код
\ 2103
градусов по Фаренгейту
U + 02109
UNICODE
& # x2109;
ШЕСТИГРАННЫЙ КОД
& # 8457;
HTML КОД
\ 2109
Знак доллара
U + 00024
UNICODE
& # x24;
ШЕСТИГРАННЫЙ КОД
& # 36;
HTML КОД
и доллар;
HTML ENTITY
\ 0024
Cent Sign
U + 000A2
UNICODE
& # xa2;
ШЕСТИГРАННЫЙ КОД
& # 162;
КОД HTML
& cent;
HTML ENTITY
\ 00A2
Знак фунта
U + 000A3
UNICODE
& # xa3;
ШЕСТИГРАННЫЙ КОД
& # 163;
КОД HTML
& фунт;
HTML ENTITY
\ 00A3
Знак евро
U + 020AC
UNICODE
& # x20AC;
ШЕСТИГРАННЫЙ КОД
& # 8364;
HTML КОД
и евро;
HTML ENTITY
\ 20AC
Знак йены
U + 000A5
UNICODE
& # xa5;
ШЕСТИГРАННЫЙ КОД
& # 165;
HTML КОД
и иен;
HTML ENTITY
\ 00A5
Знак индийской рупии
U + 020B9
UNICODE
& # x20B9;
ШЕСТИГРАННЫЙ КОД
& # 8377;
HTML КОД
\ 20B9
Знак рубля
U + 020BD
UNICODE
& # x20BD;
ШЕСТИГРАННЫЙ КОД
& # 8381;
HTML КОД
\ 20BD
Юань Символ, в Китае
U + 05143
UNICODE
& # x5143;
ШЕСТИГРАННЫЙ КОД
& # 20803;
HTML CODE
\ 5143
Plus Sign
U + 0002B
UNICODE
& # x2b;
ШЕСТИГРАННЫЙ КОД
& # 43;
КОД HTML
и плюс;
HTML ENTITY
\ 002B
Знак минуса
U + 02212
UNICODE
& # x2212;
ШЕСТИГРАННЫЙ КОД
& # 8722;
HTML КОД
& минус;
HTML ENTITY
\ 2212
Знак умножения
U + 000D7
UNICODE
& # xd7;
ШЕСТИГРАННЫЙ КОД
& # 215;
КОД HTML
& раз;
HTML ENTITY
\ 00D7
Знак раздела
U + 000F7
UNICODE
& # xf7;
ШЕСТИГРАННЫЙ КОД
& # 247;
КОД HTML
& Разделить;
HTML ENTITY
\ 00F7
Знак равенства
U + 0003D
UNICODE
& # x3d;
ШЕСТИГРАННЫЙ КОД
& # 61;
HTML КОД
& равно;
HTML ENTITY
\ 003D
Знак не равно
U + 02260
UNICODE
& # x2260;
ШЕСТИГРАННЫЙ КОД
& # 8800;
КОД HTML
& ne;
HTML ENTITY
\ 2260
Знак «меньше»
U + 0003C
UNICODE
& # x3c;
ШЕСТИГРАННЫЙ КОД
& # 60;
КОД HTML
& lt;
HTML ENTITY
\ 003C
Знак «больше»
U + 0003E
UNICODE
& # x3e;
ШЕСТИГРАННЫЙ КОД
& # 62;
КОД HTML
& gt;
HTML ENTITY
\ 003E
Дробь одна четверть
U + 000BC
UNICODE
& # xbc;
ШЕСТИГРАННЫЙ КОД
& # 188;
КОД HTML
& frac14;
HTML ENTITY
\ 00BC
Дробь Одна половина
U + 000BD
UNICODE
& # xbd;
ШЕСТИГРАННЫЙ КОД
& # 189;
КОД HTML
& frac12;
HTML ENTITY
\ 00BD
Три четверти дроби
U + 000BE
UNICODE
& # xbe;
ШЕСТИГРАННЫЙ КОД
& # 190;
КОД HTML
& frac34;
HTML ENTITY
\ 00BE
Вульгарная третья доля
U + 02153
UNICODE
& # x2153;
ШЕСТИГРАННЫЙ КОД
& # 8531;
КОД HTML
& frac13;
HTML ENTITY
\ 2153
Вульгарная фракция Две трети
U + 02154
UNICODE
& # x2154;
ШЕСТИГРАННЫЙ КОД
& # 8532;
КОД HTML
& frac23;
HTML ENTITY
\ 2154
Vulgar Fraction One Eighth
U + 0215B
UNICODE
& # x215B;
ШЕСТИГРАННЫЙ КОД
& # 8539;
КОД HTML
& frac18;
HTML ENTITY
\ 215B
Простая фракция Три восьмых
U + 0215C
UNICODE
& # x215C;
ШЕСТИГРАННЫЙ КОД
& # 8540;
КОД HTML
& frac38;
HTML ENTITY
\ 215C
Вульгарная дробь пять восьмых
U + 0215D
UNICODE
& # x215D;
ШЕСТИГРАННЫЙ КОД
& # 8541;
КОД HTML
& frac58;
HTML ENTITY
\ 215D
Восклицательный знак
U + 00021
UNICODE
& # x21;
ШЕСТИГРАННЫЙ КОД
& # 33;
КОД HTML
& искл;
HTML ENTITY
\ 0021
Вопросительный знак
U + 0003F
UNICODE
& # x3f;
ШЕСТИГРАННЫЙ КОД
& # 63;
КОД HTML
& quest;
HTML ENTITY
\ 003F
En Dash
U + 02013
UNICODE
& # x2013;
ШЕСТИГРАННЫЙ КОД
& # 8211;
КОД HTML
& ndash;
HTML ENTITY
\ 2013
Em Dash
U + 02014
UNICODE
& # x2014;
ШЕСТИГРАННЫЙ КОД
& # 8212;
КОД HTML
& mdash;
HTML ENTITY
\ 2014
Кавычки с одним левым углом
U + 02039
UNICODE
& # x2039;
ШЕСТИГРАННЫЙ КОД
& # 8249;
КОД HTML
& lsaquo;
HTML ENTITY
\ 2039
Одинарный кавычки с прямым углом
U + 0203A
UNICODE
& # x203A;
ШЕСТИГРАННЫЙ КОД
& # 8250;
КОД HTML
& rsaquo;
HTML ENTITY
\ 203A
Двойная кавычка с левым углом
U + 000AB
UNICODE
& # xab;
ШЕСТИГРАННЫЙ КОД
& # 171;
КОД HTML
& laquo;
HTML ENTITY
\ 00AB
Двойные кавычки с правым углом
U + 000BB
UNICODE
& # xbb;
ШЕСТИГРАННЫЙ КОД
& # 187;
КОД HTML
& raquo;
HTML ENTITY
\ 00BB
Коды символов HTML »
Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Подробнеессылок на символы HTML — это короткие фрагменты HTML, обычно называемые объектами символов или кодами объектов, которые используются для отображения символов, имеющих особое значение в HTML, а также символов, которые не отображаются на клавиатуре.
- Символы со специальным значением в HTML называются зарезервированными символами. Например, левая (<) и правая (>) угловые скобки зарезервированы в HTML для обозначения открывающих и закрывающих тегов элементов.
- К символам, которых нет на клавиатуре, относятся такие символы, как символ авторского права (©) и математическое значение «пи» (π).
Если мы хотим использовать эти типы символов в документе HTML и чтобы они отображались при отображении в браузере, мы используем ссылки на символы HTML.
Практический пример
Допустим, вы хотите отобразить блок HTML на веб-странице, и теги элементов будут отображаться на странице. Вы можете попробовать сделать это, просто отбросив
блоков вокруг блока HTML, который вы хотите отобразить. Однако вы обнаружите, что даже с тегами
, окружающими рассматриваемый фрагмент HTML, он все равно будет обрабатываться как HTML и отображаться браузером.Что мы можем сделать, так это заменить все специальные символы соответствующими ссылками на символы, чтобы браузер не обрабатывал код.
не препятствуют отображению этого HTML -> <код>
<код>Это список предметов.
- Элемент списка A
- Элемент списка B
- Элемент списка C
Это список предметов.<& sol; p>
- Элемент списка A <& sol; li>
- Элемент списка B <& sol; li>
- Элемент списка C <& sol; li>
<& sol; ul>
Давайте посмотрим, как этот код отображается в браузере.
Это список товаров.- Элемент списка A
- Элемент списка B
- Элемент списка C
Это список элементов. <& sol; p>
- Элемент списка A <& sol; li>
- Элемент списка B <& sol; li>
- Элемент списка C <& sol; li>
<& sol; ul >
Как видите, блоки кода вокруг первого блока кода не мешали браузеру обрабатывать HTML. Однако, заменив определенные символы во втором блоке ссылками на символы HTML, мы можем отобразить блок кода как разметку HTML.
Формат символьного объекта
В HTML существует три различных способа форматирования символьного объекта.Вы можете использовать имя символа, значение Unicode или число. Например, амперсанд может отображаться с использованием любой из следующих сущностей:
& amp;
,и
илии
.Во всех трех случаях формат выглядит практически одинаково. Каждая сущность начинается с амперсанда (&), за которым следует имя символа, Unicode или числовая ссылка, и заканчивается точкой с запятой. Когда используется число, ему должен предшествовать символ фунта (& num;), а когда используется значение Unicode, ему должны предшествовать символ фунта и буква x (& num; x).
Большинство людей используют имена символов, а не значения или числа Unicode при добавлении именованных символов в документы HTML, поскольку их намного легче запомнить, но также приемлемо использование как Unicode, так и числовых ссылок.
Диакритические знаки
Существует один особый подтип символьного кода объекта, который заслуживает особого упоминания: диакритические знаки. Это знаки, которые появляются непосредственно над предыдущей буквой и включают знаки ударения и тильды. Вот три наиболее распространенных диакритических знака:
Знак Имя персонажа Число Пример Острый & DiacriticalAcute;
́
& aacute;
производитМогила & DiacriticalGrave;
̂
â
производит âTilde & DiacriticalTilde;
̃
ã
производит ãПоддержка имен символов диакритических знаков сейчас ограничена, и вы увидите более согласованные результаты между браузерами, если будете придерживаться числовых кодов до тех пор, пока другие браузеры не добавят поддержку для имен персонажей.
Наиболее распространенные коды символов
Вот краткая справочная таблица с некоторыми из наиболее часто встречающихся ссылок на символы HTML:
Символ Имя символа Число Unicode Пример Менее & lt;
<
<
< Больше чем & gt;
>
>
> Слэш и соль;
/
/
и сол; Предложение & quot;
"
"
" Апостроф '
'
'
‘ Ampersand & amp;
и
и
и Авторские права & copy;
©
©
© Зарегистрированный товарный знак & reg;
®
®
® Градус & deg;
°
°
° Двойной угол поворота влево & laquo;
«
«
« Двойной угол, указывающий вправо & raquo;
»
»
» Неразрывное пространство & nbsp;
Полный список зарезервированных кодов символов
Полный список всех ссылок на символы HTML поддерживается Консорциумом World Wide Web как часть спецификации HTML.
Джон - писатель-фрилансер, любитель путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.
специальных символов в HTML - Урок
Специальные символы в HTML: обзор
Бывают случаи, когда необходимо отображать символы или специальные символы в HTML, которые недоступны на стандартной клавиатуре, например ©. Вам также может потребоваться отобразить специальные символы в HTML, которые имеют особое значение в HTML (<,>, & и т. Д.).Для этого HTML использует тег Special Character Entity. Тег имеет формат амперсанда (&), за которым следует знак фунта (#), за которым следует номер кода, и заканчивается точкой с запятой (;). Например, символ © (авторское право) может отображаться с помощью & # 169 ;. В настоящее время доступны буквально сотни специальных символов. Некоторые из наиболее распространенных тегов перечислены в таблице ниже.
Описание Специальный символ Код Острый акцент ´ & # 180; Амперсанд и & # 38; Знак центов ¢ & # 162; Авторское право © & # 169; Кинжал † & # 8224; Знак градуса ° & # 186; Знак отдела ÷ & # 247; Евро € & # 8363; Дробь (половина) ½ & # 189; Доля (одна четвертая) ¼ & # 188; Дробь (три четверти) ¾ & # 190; Знак больше > & # 62; Левый угол « & # 171; Знак меньше < & # 60; Знак умножения х & # 215; Знак плюс или минус ± & # 177; Кавычка (слева) “ & # 8220; Кавычка (справа) ” & # 8221; Зарегистрированный товарный знак ® & # 174; Цитата правого ангела » & # 187; Верхний индекс 1 ¹ & # 185; Товарный знак ™ & # 8482; специальных символов в HTML-Учебное пособие: изображение документа HTML5, показывающее, как кодировать специальные символы в HTML.
Специальные символы в HTML: инструкции
- Чтобы добавить специальные символы в HTML, введите амперсанд с последующим знаком решетки (& #) в том месте документа HTML, где вы хотите добавить специальный символ
- Введите номер правильного кода для символа, который вы хотите добавить.
- Введите точку с запятой (;) для завершения.
Специальные символы в HTML: видеоурок
В следующем видеоуроке под названием «Специальные символы» показано, как добавлять специальные символы в HTML.Этот видеоурок о специальных символах в HTML взят из нашего полного вводного курса HTML5 и CSS3 под названием «Освоение HTML5 и CSS3 Made Easy v.1.0».
специальных символов HTML
Эта страница содержит список специальных символов HTML. В HTML специальными символами обычно являются те, которые нелегко набрать на клавиатуре или которые могут вызвать проблемы с отображением при вводе или вставке на веб-страницу.
Если вы планируете использовать какие-либо специальные символы на этой странице, вы должны использовать либо имя объекта HTML, либо номер объекта HTML.Это обеспечит правильное отображение в большинстве / во всех браузерах.
Например, если вы хотите отобразить символ авторского права «©», вы должны использовать либо
& # 169;
илии копия;
в вашем коде.Зарезервированные символы HTML
Следующие специальные символы зарезервированы в HTML. Это потому, что это символы, составляющие язык HTML. Если вы используете в статье один из этих символов, браузер попытается интерпретировать его как HTML.Следовательно, вы должны использовать имя объекта или номер объекта, когда хотите вывести любой из этих зарезервированных символов.
Персонаж Регистрационный номер Название объекта Описание " & # 34; & quot; кавычка ' & # 39; ' апостроф и & # 38; & amp; амперсанд < & # 60; & lt; менее > & # 62; & gt; больше Общие символы HTML
Персонаж Номер объекта HTML Имя объекта HTML Описание Œ & # 338; и OElig; заглавная лигатура OE – & # 339; & oelig; маленькая лигатура oe Š & # 352; и Скарон; заглавная S с кароном š & # 353; & scaron; малый S с кароном Ÿ & # 376; и Yuml; заглавная буква Y с цифрами ƒ & # 402; & fnof; f с крючком ˆ & # 710; & circ; модификатор буквы с циркумфлексом ударение ~ & # 732; & тильда; маленькая тильда & # 8194; & ensp; en пробел & # 8195; & emsp; em пространство & # 8201; & thinsp; тонкое пространство & # 8204; & zwnj; без стыковки с нулевой шириной & # 8205; & zwj; Соединитель нулевой ширины & # 8206; & lrm; знак слева направо & # 8207; & rlm; знак справа налево - & # 8211; & ndash; в тире - & # 8212; & mdash; длинное тире ‘ & # 8216; & lsquo; левая одинарная кавычка ’ & # 8217; & rsquo; правая одинарная кавычка ‚ & # 8218; & sbquo; одинарная кавычка с малым числом 9 “ & # 8220; & ldquo; левая двойная кавычка ” & # 8221; & rdquo; правая двойная кавычка „ & # 8222; & bdquo; двойные низкие кавычки † & # 8224; & кинжал; кинжал ‡ & # 8225; и кинжал; двойной кинжал • & # 8226; и бык; пуля … & # 8230; & hellip; многоточие горизонтальное ‰ & # 8240; & permil; промилле ′ & # 8242; и премьер; минут ″ & # 8243; и Prime; секунд ‹ & # 8249; & lsaquo; одинарный левый угол цитата › & # 8250; & rsaquo; одинарная цитата под прямым углом ‾ & # 8254; & oline; над строкой € & # 8364; и евро; евро ™ & # 8482; и торговля; товарный знак ← & # 8592; & larr; стрелка влево ↑ & # 8593; & uarr; стрелка вверх → & # 8594; & rarr; стрелка вправо ↓ & # 8595; & darr; стрелка вниз ↔ & # 8596; & harr; стрелка влево-вправо ↵ & # 8629; & crarr; стрелка возврата каретки ⌈ & # 8968; & lceil; левый потолок ⌉ & # 8969; & rceil; правый потолок ⌊ & # 8970; & lfloor; левый этаж ⌋ & # 8971; & rfloor; правый пол ◊ & # 9674; и loz; ромб ♠ & # 9824; и лопаты; лопата ♣ & # 9827; и клубы; клуб ♥ & # 9829; и сердечки; сердце ♦ & # 9830; & diams; алмаз Математические символы
Символ Номер объекта HTML Имя объекта HTML Описание ∀ & # 8704; & forall; для всех ∂ & # 8706; и часть; часть ∃ & # 8707; & существует; существует ∅ & # 8709; и пусто; пустой ∇ & # 8711; & набла; набла ∈ & # 8712; & isin; isin ∉ & # 8713; & notin; notin ∋ & # 8715; & ni; ni ∏ & # 8719; и прод; прод ∑ & # 8721; & сумма; сумма - & # 8722; и минус; минус ∗ & # 8727; & lowast; низкий √ & # 8730; & radic; квадратный корень ∝ & # 8733; & prop; пропорционально ∞ & # 8734; & infin; бесконечность ∠ & # 8736; & ang; угол ∧ & # 8743; & и; и ∨ & # 8744; и или; или ∩ & # 8745; & cap; колпачок ∪ & # 8746; и чашка; чашка ∫ & # 8747; & int; интегральный ∴ & # 8756; и там4; следовательно ∼ & # 8764; и сим; похож на ≅ & # 8773; и конг; соответствует ≈ & # 8776; & асимп; почти равно ≠ & # 8800; & ne; не равно ≡ & # 8801; и эквиваленты; эквивалент ≤ & # 8804; & le; меньше или равно ≥ & # 8805; и ge; больше или равно ⊂ & # 8834; и суб; подмножество ⊃ & # 8835; & sup; надмножество ⊄ & # 8836; & nsub; не подмножество ⊆ & # 8838; & sube; подмножество или равно ⊇ & # 8839; и выше; superset или аналогичный ⊕ & # 8853; & oplus; обведено плюс ⊗ & # 8855; & otimes; обведено раз ⊥ & # 8869; и перп; перпендикуляр ⋅ & # 8901; & sdot; оператор точки Греческие символы
Греческое письмо Номер объекта HTML Имя объекта HTML Описание Α & # 913; и альфа; Альфа Β & # 914; и бета; Бета Γ & # 915; и гамма; Гамма Δ & # 916; и Дельта; Дельта Ε & # 917; и Эпсилон; Эпсилон Ζ & # 918; и Зета; Зета Η & # 919; & Eta; Эта Θ & # 920; и Theta; Тета Ι & # 921; и йота; Йота Κ & # 922; и Каппа; Каппа Λ & # 923; и лямбда; Лямбда Μ & # 924; и Mu; му Ν & # 925; и Nu; Nu Ξ & # 926; и Си; Си Ο & # 927; и Omicron; Omicron Π & # 928; и Pi; Пи Ρ & # 929; и Rho; Ро неопределенный Sigmaf Σ & # 931; и Sigma; Сигма Τ & # 932; и Тау; Тау Υ & # 933; и ипсилон; Ипсилон Φ & # 934; и Phi; Phi Χ & # 935; и Чи; Чи Ψ & # 936; и пси; фунтов на квадратный дюйм Ом & # 937; и Омега; Омега α & # 945; & альфа; альфа β & # 946; и бета; бета γ & # 947; & гамма; гамма δ & # 948; & дельта; дельта ε & # 949; & epsilon; эпсилон ζ & # 950; и дзета; дзета η & # 951; & eta; эта θ & # 952; & theta; тета ι & # 953; и йота; йота κ & # 954; и каппа; каппа λ & # 955; & лямбда; лямбда мкм & # 956; & mu; му ν & # 957; & nu; ню ξ & # 958; и xi; xi ο & # 959; & omicron; омикрон π & # 960; & pi; пи ρ & # 961; & rho; ро ς & # 962; & sigmaf; сигмаф σ & # 963; & сигма; сигма τ & # 964; & тау; тау υ & # 965; и ипсилон; ипсилон φ & # 966; и phi; фи χ & # 967; и чи; чи ψ & # 968; & psi; фунтов на кв. Дюйм ω & # 969; и омега; омега ϑ & # 977; & thetasym; тета-символ ϒ & # 978; и upsih; ипсилон символ ϖ & # 982; & piv; символ пи ISO 8859-1 Символы
В следующей таблице показаны символы ISO 8859-1.
Символ / символ Номер объекта HTML Имя объекта HTML Описание À & # 192; и Агрейв; заглавная а, могильный акцент Á & # 193; & Aacute; заглавная а, острый акцент Â & # 194; и Acirc; заглавная буква A, диакритический знак с циркумфлексом Ã & # 195; и Атилде; заглавная а, тильда Ä & # 196; и Auml; заглавная буква а, марка умляута Å & # 197; и Aring; заглавная а, кольцо Æ & # 198; и AElig; капитал ae Ç & # 199; & Ccedil; капитал c, седилья È & # 200; и Эгрейв; заглавная буква е, могильный акцент É & # 201; и Eacute; заглавная е, острый ударение Ê & # 202; и Ecirc; заглавная e, с диакритическими знаками Ë & # 203; и Euml; заглавная e, марка умляута Ì & # 204; и Игрейв; заглавная буква i, могильный акцент Í & # 205; & Iacute; заглавная i, острый акцент Î & # 206; и Icirc; заглавная i, с диакритическими знаками Ï & # 207; и Iuml; заглавная буква i, марка умляута ì & # 208; & ETH; capital eth, исландский Ñ & # 209; и Ntilde; заглавная буква n, тильда Ò & # 210; и Огрейв; заглавная o, могильный акцент Ó & # 211; & Oacute; заглавная o, острый акцент Ô & # 212; и Ocirc; заглавная o, с диакритическими знаками Õ & # 213; и Otilde; заглавная o, тильда Ö & # 214; и Ouml; заглавная буква о, марка умляута Ø & # 216; и Oslash; заглавная o, косая черта Ù & # 217; и Юграве; заглавная буква u, могильный акцент Ú & # 218; и Uacute; заглавная буква u, острый ударение Û & # 219; и Ucirc; заглавная буква U, с диакритическим ударением Ü & # 220; и Uuml; заглавная буква u, марка умляута Ý & # 221; и Yacute; заглавная y, острый удар Þ & # 222; & THORN; столица THORN, исландская ß & # 223; & szlig; small sharp s, немецкий до & # 224; & agrave; малый а, могильный акцент до & # 225; & aacute; малый а, акцентный â & # 226; и acirc; small a, акцент с циркумфлексом г & # 227; & atilde; малая а, тильда ä & # 228; & auml; малый а, умляут марка å & # 229; & aring; малая А, кольцо æ & # 230; & aelig; малый ae ç & # 231; и ccedil; small c, седиль и & # 232; & egrave; small e, серьезный акцент é & # 233; & eacute; строчная е, с острым ударением ê & # 234; и ecirc; строчная буква e, акцент с циркумфлексом ë & # 235; & euml; small e, марка умляута мм & # 236; & igrave; small i, серьезный акцент до & # 237; & iacute; маленький i, с острым ударением до & # 238; и icirc; small i, акцент с циркумфлексом или & # 239; и iuml; small i, марка умляута ð & # 240; & eth; small eth, исландский – & # 241; & ntilde; строчная буква n, тильда шт & # 242; & ograve; small o, серьезный акцент - & # 243; & oacute; строчная o, острый акцент ô & # 244; & ocirc; строчная буква o, ударение с циркумфлексом х & # 245; & otilde; строчная о, тильда ö & # 246; & ouml; small o, марка умляута ø & # 248; & oslash; строчная o, косая черта ù & # 249; & ugrave; маленькая буква U, серьезный акцент ú & # 250; и uacute; строчная буква u с острым ударением û & # 251; и ucirc; строчная буква U, акцент с циркумфлексом ü & # 252; & uuml; small u, марка умлаута ý & # 253; & yacute; маленький y, острый акцент þ & # 254; & шип; малый шип, исландский ÿ & # 255; & yuml; small y, марка умлаута ISO 8859-1 Символы
В следующей таблице содержатся символы ISO 8859-1, которые могут оказаться полезными при кодировании веб-страниц.
Символ / символ Номер объекта HTML Имя объекта HTML Описание & # 160; & nbsp; неразрывный пробел ¡ & # 161; & iexcl; перевернутый восклицательный знак ¢ & # 162; & цент; цент £ & # 163; & фунт; фунтов ¤ & # 164; & curren; валюта ¥ & # 165; иен; йен ¦ & # 166; & brvbar; ломаная вертикальная полоса § & # 167; & sect; раздел ¨ & # 168; & uml; шаг диэрезиса © & # 169; & копия; авторское право ª & # 170; & ordf; женский порядковый указатель « & # 171; & laquo; угловая кавычка (слева) ¬ & # 172; и нет; отрицание & # 173; & застенчивый; мягкий дефис ® & # 174; и рег; зарегистрированная торговая марка ¯ & # 175; & macr; интервал макрон ° & # 176; & deg; градусов ± & # 177; & plusmn; плюс-минус ² & # 178; и sup2; надстрочный 2 ³ & # 179; и sup3; надстрочный 3 ´ & # 180; и острый; расстояние острое µ & # 181; и микро; микро ¶ & # 182; и пара; пункт · & # 183; и миддот; средняя точка ¸ & # 184; & cedil; междурядье седиль ¹ & # 185; и sup1; надстрочный 1 º & # 186; & ordm; мужской порядковый номер » & # 187; & raquo; угловая кавычка (правая) ¼ & # 188; и frac14; дробь 1/4 ½ & # 189; и frac12; дробь 1/2 ¾ & # 190; и frac34; дробь 3/4 ¿ & # 191; & iquest; перевернутый вопросительный знак × & # 215; & раз; умножение ÷ & # 247; & div; отдел Как использовать специальные символы в HTML
Веб-страницы, которые вы посещаете в Интернете, создаются с использованием HTML-кода, который сообщает веб-браузерам, каково содержимое страницы и как визуально отображать его для зрителей. Код содержит учебные строительные блоки, известные как элементы, которые никогда не видит зритель веб-страницы. Код также содержит обычные текстовые символы, такие как символы заголовков и абзацев, предназначенные для чтения пользователем.
Роль специальных символов в HTML
Когда вы используете HTML и набираете текст, предназначенный для просмотра, вам обычно не нужны специальные коды - вы используете только клавиатуру компьютера, чтобы добавить соответствующие буквы или символы. Проблема возникает, когда вы хотите ввести символ в читаемый текст, который HTML использует как часть самого кода.Эти символы включают символы < и > , которые используются в коде для начала и завершения каждого тега HTML. Вы также можете включить в текст символы, которые не имеют прямого аналога на клавиатуре, например © и Ñ . Для символов, у которых нет клавиши на клавиатуре, вы вводите код.
CSA Images / Getty ImagesСпециальные символы - это определенные фрагменты HTML-кода, предназначенные для отображения символов, которые используются в HTML-коде, или для включения символов, которых нет на клавиатуре, в текст, который видит зритель.HTML отображает эти специальные символы в числовой или символьной кодировке, чтобы их можно было включить в документ HTML, прочитать в браузере и правильно отобразить для посетителей вашего сайта.
В основе синтаксиса HTML-кода лежат три символа. Вы никогда не должны использовать их в читаемых частях своей веб-страницы без предварительного кодирования для правильного отображения. Это символы «больше», «меньше» и «амперсанд». Другими словами, вы никогда не должны использовать в своем HTML-коде символ «меньше» <, если он не является началом HTML-тега.Если вы это сделаете, персонаж запутает браузеры, и ваши страницы могут отображаться не так, как вы ожидаете. Три символа, которые вы никогда не должны добавлять незакодированными, это:
- знак меньше <
- знак больше >
- амперсанд и
Когда вы вводите эти символы непосредственно в свой HTML-код - если вы не используете их в качестве элементов кода - введите их кодировку, чтобы они правильно отображались в читаемом тексте:
- знак меньше - <
- знак больше - >
- амперсанд - и
Каждый специальный символ начинается с амперсанда - даже специальный символ для амперсанда начинается с этого символа. Специальные символы заканчиваются точкой с запятой. Между этими двумя символами вы добавляете все, что подходит для специального символа, который вы хотите добавить. lt (для меньше ) создает символ «меньше», когда он появляется между амперсандом и точкой с запятой в HTML. Аналогично, gt создает символ «больше», а amp дает амперсанд, когда они помещаются между амперсандом и точкой с запятой.
Специальные символы, которые нельзя ввести
Любой символ, который может быть отображен в стандартном наборе символов Latin-1, может быть отображен в HTML.Если он не отображается на клавиатуре, используйте символ амперсанда с уникальным кодом, который был назначен символу, за которым следует точка с запятой.
Например, «дружественный код» для символа авторского права - ©, а ™ - это код для символа товарного знака.
Этот понятный код легко набирать и легко запоминать, но есть много символов, у которых нет понятного кода, который легко запомнить.
Каждому символу, который можно ввести на экране, соответствует десятичный числовой код.Вы можете использовать этот числовой код для отображения любого символа. Например, десятичный числовой код для символа авторского права - © - демонстрирует , как работают числовые коды. Они по-прежнему начинаются с амперсанда и заканчиваются точкой с запятой, но вместо понятного текста вы используете знак числа, за которым следует уникальный цифровой код для этого символа.
Дружественные коды легко запомнить, но цифровые коды часто более надежны. Сайты, построенные с использованием баз данных и XML, могут не иметь всех понятных кодов, но они поддерживают числовые коды.
Лучший способ найти числовые коды символов - это наборы символов, которые вы можете найти в Интернете. Когда вы найдете нужный символ, просто скопируйте и вставьте числовой код в свой HTML.
Некоторые наборы символов включают:
- Коды валют
- Математические коды
- Коды пунктуации
- Коды произношения
- Коды диакритики
Символы неанглийского языка
Специальные символы не ограничиваются английским языком. Специальные символы неанглийских языков могут быть выражены в HTML, включая:
Итак, что такое шестнадцатеричные коды?
Шестнадцатеричный код - это альтернативный формат для отображения специальных символов в HTML-коде. Вы можете использовать любой метод для своей веб-страницы. Вы ищите их в наборах символов в Интернете и используете их так же, как дружественные коды или числовые коды.
Добавьте декларацию Unicode в заголовок документа
Добавьте следующий метатег в любом месте внутри
Подсказки
Независимо от того, какой метод вы используете, помните о нескольких передовых методах:
Всегда заканчивайте свой объект точкой с запятой
Некоторые редакторы HTML позволяют размещать HTML-коды без последней точки с запятой, но ваши страницы будут недействительными, и многие веб-браузеры не будут правильно отображать объекты без нее.
Всегда начинайте с амперсанда
Многие веб-редакторы позволяют отказаться от "amp;" но когда вы показываете только амперсанд в XHTML, это вызывает ошибку проверки.
Протестируйте свои страницы в максимально возможном количестве браузеров
Если символ имеет решающее значение для понимания вашего документа, и вы не можете протестировать его в комбинациях браузера / ОС, которые используют ваши клиенты, вам следует найти другой способ его представления. Однако, прежде чем прибегать к изображениям или чему-то еще, попробуйте один из инструментов тестирования браузера, который может проверить ваш код в нескольких браузерах.
Спасибо, что сообщили нам об этом!
Расскажите, почему!
Другой Недостаточно подробностей Сложно понятьсимволов HTML | HTML Dog
Все символы, используемые в HTML, могут быть вставлены с помощью номера объекта или имени объекта .
Эти символы и коды используются либо потому, что символы не следует вводить непосредственно в документ HTML, они могут вызвать конфликты , либо являются одними из наиболее полезных символов для создания хорошей типографики .
Символ Номер объекта HTML Имя объекта HTML Описание & & # 38;
и amp;
Амперсанд < & # 60;
& lt;
Знак «меньше» > & # 62;
& gt;
Знак "больше" " & # 34;
"
Кавычка ' 000
Апостроф & # 160;
& nbsp;
Неразрывное пространство ' s; # 8216; 12quot; 6
mark
' & # 8217;
& rsquo;
Правая одинарная кавычка " " знак
” & # 8221;
& ldquo;
Правая двойная кавычка - 91 247 & # 8208;
& тире;
Даш - & # 8211;
& ndash;
En dash - & # 8212;
& mdash;
Em dash … & # 8230;
& hellip;
Многоточие × & # 215;
& раз;
Знак умножения ÷ & # 247;
и разделить;
Знак отделения - & # 8722;
и минус;
Знак минус ½ & # 189;
и frac12;
Первая половина ⅓ & # 8531;
и frac13;
Третья доля ¼ & # 188;
и frac14;
Дробь одна четверть ∞ & # 8734;
& infin;
Infinity £ & # 163;
& фунт;
Знак фунта ¢ & # 162;
и центов;
Знак центов ¥ & # 165;
иена;
Знак йены € & # 8364;
и евро;
Знак евро ° & # 176;
& deg;
Знак градуса © & # 169;
и копия;
Знак авторских прав ™ & # 8482;
и торговля;
Знак товарного знака † & # 8224;
и кинжал;
Кинжал № & # 8470;
& numero;
Цифровой знак Основной элемент управления и латинские символы. Эквивалентен набору символов ASCII. Неиспользуемые, недействительные или непечатаемые коды не учитываются.
Символ Номер объекта HTML Имя объекта HTML Описание & # 9;
Горизонтальный выступ & # 10;
Новая линия & # 32;
Космос ! & # 33;
и искл.
Восклицательный знак " & # 34;
"
Двойные кавычки # $ & # 36;
& доллар;
Знак доллара % & # 37;
& & # 38;
& amp;
Ampersand & # 40;' & # 39;
& # 38;
47
& lpar;
Левая скобка ) & # 41;
& rpar;
Правая скобка * & # 42;
и аст;
Звездочка + & # 43;
и плюс;
Знак плюс , & # 44;
и запятая;
Запятая - & # 45;
Дефис с минусом . & # 94;
и шляпа;
Circumflex _ & # 95;
& lowbar;
Подчеркивание / низкая полоса ` & # 96;
и могила;
Могильный акцент a-z & # 97;
-& # 122;
Строчные буквы a – z { & # 123;
& lcub;
Левая скоба / фигурная скоба | & # 124;
и глагол;
Вертикальная линия / полоса } & # 125;
& rcub;
Правая скоба / фигурная скоба ~ & # 126;
Тильда HTML-символы 160–255 (127–159 не используются).
Символ Номер объекта HTML Имя объекта HTML Описание & # 160;
& nbsp;
Неразрывное пространство ¡ & # 161;
& iexcl;
Перевернутый восклицательный знак ¢ & # 162;
и центов;
Знак центов £ & # 163;
& фунт;
Знак фунта ¤ & # 164;
& curren;
Знак валюты ¥ & # 165;
иена;
Знак йены ¦ & # 166;
& brvbar;
Сломанная полоса § & # 167;
& sect;
Знак раздела ¨ & # 168;
& uml;
Диэрезис © & # 169;
и копия;
Знак авторских прав ª & # 170;
& ordf;
Женский порядковый указатель « & # 171;
& laquo;
Двойные угловые кавычки, указывающие влево ¬ & # 172;
и нет;
Без подписи & # 173;
& застенчивый;
Мягкий перенос ® & # 174;
и рег;
Зарегистрированный знак ¯ & # 175;
& macr;
Макрон ° & # 176;
& deg;
Знак градуса ± & # 177;
& plusmn;
Знак плюс-минус ² & # 178;
& sup2;
Два надстрочных индекса ³ & # 179;
& sup3;
Тройной верхний индекс ´ & # 180;
и острый;
Острый акцент µ & # 181;
и микро;
Микроподпись ¶ & # 182;
и пара;
Знак Pilcrow · & # 183;
и миддот;
Средняя точка ¸ & # 184;
& cedil;
Седилья ¹ & # 185;
& sup1;
Верхний индекс 1 º & # 186;
& ordm;
Мужской порядковый показатель » & # 187;
& raquo;
Двойные угловые кавычки, указывающие вправо ¼ & # 188;
и frac14;
Дробь одна четверть ½ & # 189;
и frac12;
Первая половина ¾ & # 190;
и frac34;
Три четверти ¿ & # 191;
& iquest;
Перевернутый вопросительный знак À & # 192;
и Агрейв;
Заглавная буква A с надписями Á & # 193;
& Aacute;
Заглавная буква A с ударением Â & # 194;
и Acirc;
Заглавная буква A с циркумфлексом Ã & # 195;
и Atilde;
Заглавная буква A с тильдой Ä & # 196;
и Auml;
Заглавная буква A с тремой Å & # 197;
& Aring;
Заглавная буква A с кольцом сверху Æ & # 198;
и AElig;
Заглавная буква AE Ç & # 199;
и Ccedil;
Заглавная буква C с седилем È & # 200;
и Egrave;
Заглавная буква E с тупым ударением É & # 201;
и Eacute;
Заглавная буква E с острым ударением Ê & # 202;
и Ecirc;
Заглавная буква E с циркумфлексом Ë & # 203;
и Euml;
Заглавная буква E с тремой Ì & # 204;
и Игрейв;
Прописная буква I с надписями Í & # 205;
& Iacute;
Прописная буква I с острым ударением 12 & # 206;
и Icirc;
Заглавная буква I с циркумфлексом Ï & # 207;
и Iuml;
Прописная буква I с тремой ì & # 208;
& ETH;
Заглавная буква eth Ñ & # 209;
& Ntilde;
Заглавная буква N с тильдой Ò & # 210;
и Огрейв;
Заглавная буква O с надписями Ó & # 211;
& Oacute;
Заглавная буква O с ударением Ô & # 212;
и Ocirc;
Заглавная буква O с циркумфлексом Õ & # 213;
и Otilde;
Заглавная буква O с тильдой Ö & # 214;
и Ouml;
Заглавная буква O с тремой × & # 215;
& раз;
Знак умножения Ø & # 216;
и Ослаш;
Заглавная буква O со штрихом Ù & # 217;
и Юграве;
Заглавная буква U с надписями Ú & # 218;
и Uacute;
Прописная буква U с ударением Û & # 219;
и Ucirc;
Заглавная буква U с циркумфлексом Ü & # 220;
и Uuml;
Прописная буква U с тремой Ý & # 221;
и Якут;
Заглавная буква Y с ударением Þ & # 222;
& THORN;
Шип прописных букв ß & # 223;
& szlig;
Резкая строчная буква s à & # 224;
& agrave;
Строчная буква а с могилой á & # 225;
& aacute;
Строчная буква a с ударением â & # 226;
& acirc;
Строчная буква a с циркумфлексом ã & # 227;
& atilde;
Строчная буква a с тильдой ä & # 228;
& auml;
Строчная буква a с тремой å & # 229;
& aring;
Строчная буква a с кружком сверху æ & # 230;
& aelig;
Строчная буква ae ç & # 231;
& ccedil;
Строчная буква c с седилем è & # 232;
& egrave;
Строчная буква е с тупым ударением é & # 233;
& eacute;
Строчная буква e с ударением ê & # 234;
и ecirc;
Строчная буква e с циркумфлексом ë & # 235;
& euml;
Строчная буква e с тремой ì & # 236;
& igrave;
Строчная буква i с могилой í & # 237;
& iacute;
Строчная буква i с ударением î & # 238;
и icirc;
Строчная буква i с циркумфлексом ï & # 239;
& iuml;
Строчная буква i с тремой ð & # 240;
& eth;
Строчная буква eth - & # 241;
& ntilde;
Строчная буква n с тильдой ò & # 242;
& ograve;
Строчная буква o с могилой - & # 243;
& oacute;
Строчная буква o с ударением ô & # 244;
& ocirc;
Строчная буква o с циркумфлексом х & # 245;
& otilde;
Строчная буква o с тильдой ö & # 246;
& ouml;
Строчная буква o с тремой ÷ & # 247;
и разделить;
Знак деления ø & # 248;
& oslash;
Строчная буква o со штрихом ù & # 249;
& ugrave;
Строчная буква u с могилой ú & # 250;
& uacute;
Строчная буква u с ударением û & # 251;
& ucirc;
Строчная буква u с циркумфлексом ü & # 252;
& uuml;
Строчная буква u с тремой ý & # 253;
& yacute;
Строчная буква y с ударением þ & # 254;
& шип;
Строчная буква шип ÿ & # 255;
& yuml;
Строчная буква y с диэрезисом Руководство по использованию специальных символов в HTML
Руководство по использованию специальных символов в HTMLВвод символов
Вы можете ввести символ в HTML-документ следующими способами:
- ♥
Непосредственно как персонаж, e. грамм.
♥ или
,
если кодировка символов
Документ HTML позволяет это (для символа есть код), и у вас есть
инструменты разработки, позволяющие написать персонажа.
Убедитесь, что кодировка символов указана правильно
в заголовках HTTP и / или в метатеге
- & # x2665;
Как символьная ссылка (ссылка на числовой знак),
на основе номера Unicode
персонажа. Например,
символ ♥ (U + 2665) может быть представлен
как
& # x2665;
(используя число в шестнадцатеричном формате). Число считается десятичным, если ему не предшествуетx
. Например, букву (U + 00E9) можно записать как как& # xe9;
или как& # 233;
. - и сердечки;
Как ссылка на объект (известная как ссылка на именованный символ в HTML5),
основан на соглашениях, которые присваивают персонажам полумнемонические имена.
Например,
символ сердца ♥ может быть представлен как
& hearts;
, г. буква (е с острым ударением) как& eacute;
, г. и символ ¦ (вертикальная ломаная черта) как& brvbar;
. Количество символов для какой объект был определен.Для получения дополнительной информации посетите сайт Алана Вуда. Тестовые страницы для диапазонов символов Unicode . Предупреждение: Черновики HTML5 иметь расширенный набор «именованных ссылок на символы», но добавленные имена имеют ограниченную поддержку браузером, и они ничего не добавляют выразительной силе HTML, просто квазимнемонические имена для использоваться вместо кодовых номеров.
В дополнение к этим основным методам можно ввести символ через код JavaScript, где строковый литерал может содержать символ используя «обратную косую черту», например
\ xe9
или же>
. В коде CSS символьные данные, добавляемые в при рендеринге документа может использоваться другой "Обратная косая черта", например\ 0000e9
.По возможности используйте UTF-8
Демонстрация
Вуаля! ☺☻Обычно лучший вариант - ввести символов как таковых , используя Unicode-совместимый инструмент разработки, а также сохранение и обслуживание документа как UTF-8 закодировано.Это делает исходный HTML более читабельный и позволяет избежать шагов, которые могут привести к ошибкам. Просто убедитесь, что UTF-8 правильно объявлен :
- веб-сервер объявляет UTF-8 как кодировку в заголовках HTTP,
Content-Type: text / html; charset = utf-8
(проверьте это, используя, например, программу просмотра заголовков HTTP, например Web-сниффер), или - веб-сервер не объявляет кодировку (просто
Content-Type: text / html
), и вы указываете кодировка в самом документе e.грамм. с использованием<мета-кодировка = utf-8>
На этой странице не используется UTF-8, поскольку это усложняет Обслуживание. Я редактирую страницу через соединение оболочки Unix, используя Emacs редактор.
Решение проблем со шрифтами
Проблемы представления символов в HTML обычно была решена благодаря лучшим браузерам. Проблема рендеринга персонажей осталось.
По спецификациям, браузеры должны отображать символ, если в системе, которая его содержит, есть любых шрифтов .Если шрифты, указанные автором (в CSS
font-family
настроек или, что редко в наши дни, с использованиемшрифта
разметки в HTML) не содержат символа, браузеры должны использовать резервные шрифты. То же самое применимо, если шрифты не указано автором; браузеры должны использовать в первую очередь шрифты по умолчанию, использование альтернативных шрифтов для любого символа, не охваченного основным шрифтом.На практике так не всегда получается.Особенно IE печально известен своими неудачами в этом отношении. Часто не отображается характер, хотя он мог бы это сделать, если бы использовал все шрифты в системе. Если браузер не может отобразить символ, он может покажите небольшой прямоугольник, возможно, содержащий вопросительный знак, ?, или какой-то подобный индикатор. Вот быстрый тест (символ U + 0840, который, вероятно, не поддерживается ни одним шрифтом на вашем компьютере): ࡀ.
Принцип резервного шрифта имеет подводные камни. Проблема в том, что нет гарантии, что символы из разных шрифтов подходят друг к другу. На следующем снимке экрана некоторые китайские иероглифы выглядят смелыми. При ближайшем рассмотрении они оказываются из шрифта без засечек, который отличается от основного шрифта текста. В любом случае внешний вид текста тревожный, , и читатель может заподозрить, что это ошибочное , а не просто плохо отображается.Это может произойти, если у вас есть китайский текст и вы не укажете шрифт, или вы указываете шрифты, которые не содержат всех необходимых символов.
Для текстов латинскими буквами такие проблемы стали относительно редкими. Наиболее часто используемые шрифты хорошо передают латинские буквы. Но если ты тоже нужно несколько редких букв или использовать специальный шрифт, могут возникнуть проблемы. Шрифты разработаны для особого использования, например фирменный шрифт компании или личный шрифт художника, часто ограниченный репертуар персонажей.Когда затем применяется резервный шрифт, буква с ударением, такая как ă, может стилистически выглядеть довольно отличается от соответствующей безударной буквы (а).
Таким образом, вы должны
- определяют набор общедоступных шрифтов, так что каждый из них содержит все необходимые символы (в приемлемой форме)
- укажите список этих шрифтов в порядке предпочтения в
правило семейства шрифтов
- дополнительно рассмотреть возможность встраивания шрифта содержащая символ и включающая его в список, когда у вас есть персонаж, который иначе мог бы быть недоступен.
Если вам нужно прибегнуть к резервным шрифтам, постарайтесь сделать их использование последовательным. Например, шрифт Arial Unicode MS является подходящей альтернативой для Arial и, возможно, для некоторых других шрифтов того же общего дизайна. Но для существенно другого базового шрифта попробуйте найти запасные шрифты, которые больше на него похожи.
Здесь есть полезная информация о поддержке шрифтов для символы в FileFormat.Info сайт, раздел Символы. Информация не распространяется на все шрифты, но в нем перечислены все шрифты которые вы обычно можете ожидать от посетителей, и многое другое.Следующая простая форма - это быстрый способ доступа к информация:
Пример использования
Предположим, что мы хотим использовать ПЕСОЧНЫЕ ЧАСЫ U + 231B персонаж. Согласно FileFormat.Info, существует восемь шрифтов, которые содержать это. Но если вы посмотрите на символ в шрифтах (вы можете нажмите ссылку «Просмотреть все» на странице результатов, чтобы увидеть их), вы заметите, что некоторые из них не подходят. Более того, как вы проверяете у Алана Вуда страница информации о шрифтах, большинство шрифтов довольно особенные.Точнее, это ситуация с ними:
- Arial Unicode MS
- Это самый крупный шрифт, который есть у большинства людей на своих компьютерах. Но это не всегда доступно: это коммерческий продукт Microsoft, поставляется с Office 2000 и новее.
- Код2000
- Очень крупный шрифт, бесплатное ПО. Необходимо загрузить и установить.
- Эверсон Моно
- Моноширинный шрифт, который можно бесплатно загрузить за небольшую лицензионную плату.
- Everson Моно-наклонный
- Номинально косая (наклонная) версия EversonMono, но есть
для такого персонажа нет разницы. Более того, в CSS это не
называться собственным именем, но с использованием Everson Mono и
Стиль шрифта
: наклонный
или Стиль шрифта: курсив
. - LastResort
- Общий резервный шрифт, не подходящий для обычного использования, но можно использовать при тестировании.
- Кивира
- Относительно новый бесплатный шрифт, малоизвестный.
- Символы
- Еще один относительно новый бесплатный шрифт, малоизвестный.
- Unicode BMP Fallback SIL
- Еще один общий резервный шрифт, показывающий только кодовый номер в поле.
Подводя итог, если вы используете символ ЧАСЫ, посетители будут увидеть это тогда и только тогда, когда у них есть Office в их системе или у них есть специальных шрифтов, которые нужно скачать и установить отдельно. Другие будут видеть только вопросительный знак в поле, кодовый номер 213B в поле, или что-то подобное.Если вы решили рискнуть, вам следует использовать таблица стилей, которая применяет следующее объявление к элементу, содержащему символ:
Семейство шрифтов: Quivira, «Arial Unicode MS», Symbola, «EversonMono»;
Порядок шрифтов в списке, конечно, зависит от вас, ставим на первое место те шрифты, где визуализация выглядит лучше всего.Простые тесты:
⌛ (символ HOURGLASS без настроек шрифта)
⌛ (символ HOURGLASS с указанными выше настройками шрифта).Математический случай
Поддержка шрифтов для КОНТУР ИНТЕГРАЛ ∮ (U + 222E) относительно широко распространен, хотя шрифты являются специальными шрифтами, а не обычно используемыми шрифтами для копирования текста.
Совместная доступность шрифтов на компьютерах довольно высока, поэтому вам может даже не понадобиться делать какие-либо настройки шрифта. Тем не менее, такие настройки могут быть полезны, отчасти потому, что те же настройки можно использовать для многих других математических символов.В дополнение к потенциальной помощи некоторым браузерам в отображении персонажа вообще, настройки шрифта могут помочь сделать более приятным и единообразным типографский вид.
Основная проблема заключается в том, что заказывает шрифтов в порядок предпочтения. Обычно математические тексты работают лучше при визуализации. шрифтами с засечками, поскольку они помогают различать математические символы из друг от друга и от других персонажей. Многие символы не содержат засечек, но они могут по-прежнему лучше соответствовать дизайну шрифта с засечками.С другой стороны, математические символы должны соответствовать их традиционным формы в книгах, если это возможно. Такие соображения, как также как устранение некоторых дублирований, может привести к следующему список, основанный на данных FileFormat.Info на поддержка шрифтов для CONTOUR INTEGRAL и некоторая дополнительная информация:
семейство шрифтов: «Arial Unicode MS», «Lucida Sans Unicode», «CambriaMath», «Asana Math», «OpenSymbol», «Symbola», «Quivira», «STIX», «Code2000», «DejaVu Sans», «унифонт»;
Дополнительная информация об использовании математических символов в HTML. на странице Математика в HTML (и CSS) .Смотрите также Математические символы в ISO 80000-2 - тестовая страница .
Отдавайте предпочтение заранее составленным символам
Буквы с диакритическим знаком, например «é», имеют два представительства:
- как предварительно составленный символ, содержащий базовый символ и диакритический знак, например U + 00E9 СТРОЧНАЯ ЛАТИНСКАЯ БУКВА E с ОСТРЫМ
- в качестве основного символа, например U + 0065 СТРОЧНАЯ ЛАТИНСКАЯ БУКВА E, за которым следует объединяющий знак, например U + 0301 СОЧЕТАТЬ ОСТРЫЙ АКЦЕНТ
Если вы используете символьные ссылки, вы должны использовать
& # xe9;
в первом случае,e & # x301;
в последнем.Вот как ваш браузер отображает их в этом контекст: é против é.Обычно ожидается, что визуальный рендеринг будет таким же, но на самом деле это может отличаться. Иногда используемый шрифт не содержат заранее составленный символ. Чаще всего шрифт не содержит совмещающий знак. Если знак взят из другого шрифта, это может привести к катастрофе.
В большинстве случаев заранее составленные символы работают лучше. Лучше использовать глиф, разработанный типографом, чем позволять браузеры создают символ из базового символа и комбинирования диакритический знак.Особенно старые браузеры часто выполняют строительную работу плохо. Для приемлемого рендеринга браузеру необходимо проверить свойства основного символа и установите диакритический знак соответственно. Например, диакритический знак должен быть размещены в вертикальном положении выше, чем в. (С другой стороны, расширенный браузер может распознать, что базовый символ и знак объединения эквивалентен заранее составленному символу и использует глиф для него.)
Браузеры, поисковые системы и другое программное обеспечение (например, редакторы, когда работают с текстом, скопированным с веб-страницы) обычно лучше работают с заранее составленные символы из-за их простоты. Это еще только другой символ, одна кодовая точка Unicode. Кроме того, заранее составленные символы используются гораздо чаще, чем комбинированные марки, поэтому существует сильная мотивация разработчиков программного обеспечения для их решения.
Однако не все комбинации букв и комбинированные знаки существуют. как заранее составленные символы.Существует фиксированное количество предварительно составленных символы в Юникоде. Поэтому для некоторых (относительно редких) символов используются в разных языках и в разных обозначениях может потребоваться комбинирование знаков.
Помощь по выбору шрифтов
- В первую очередь, попробуйте найти шрифт, охватывающий все символы. тебе нужно. Смешивание шрифтов обычно дает плохие результаты, особенно внутри слов.
- Если вы используете один список
font-family
для текста в целом и некоторых специальный списокfont-family
для специальных символов, заключить последний вшрифт
илиохватить
элементов с атрибутомкласса
, e. грамм.
⌛
или
& # x231b;
и укажите список шрифтов для класса в CSS, например
.special {font-family: Quivira, «Arial Unicode MS», Symbola, «Everson Mono»; }
- Для разных символов могут потребоваться разные настройки шрифта.
- Многие люди говорят, что тег
font
- зло, но на самом деле это более информативный, чем, охват
здесь.Однако на самом деле это не имеет значения. - Многие гиды говорят, что всегда нужно добавлять
«общее» название семейства шрифтов, например
без засечек
илиserif
в списокfont-family
. Для специальных символов нет особых причин. с ограниченной поддержкой шрифтов, особенно с учетом того, что шрифт с засечками и без засечек различие для них часто не имеет значения. - Убедитесь, что вы пишете название семейства шрифтов понятным языком. браузерами.Это не всегда соответствует названию, под которым шрифт упоминается в различных контекстах. Проверьте страница со списком шрифтов в IE; это показывает распознаваемые браузером имена шрифтов, установленных в вашей системе.
- Попробуйте проверить свой текст, используя каждый из упомянутых вами шрифтов
в списке семейства шрифтов
, вместо того, чтобы полагаться на общие утверждения о них. Это может означать, что вам нужно скачать и установить много шрифтов и тестовые страницы с разными настройками стиля перед написанием окончательная таблица стилей.
- Иногда отображение символа в шрифте настолько плохое
что шрифт лучше всего исключить из семейства шрифтов
Курсив и полужирный шрифт
Будьте особенно осторожны, если специальные символы могут появиться в курсивом или жирным шрифтом. Большинство шрифтов с очень большим или специализированным набором символов отсутствуют варианты, выделенные курсивом и жирным шрифтом.Веб-браузеры по-прежнему будут применяться курсивом и полужирным шрифтом, но алгоритмическими методами, которые производят очень плохие результаты. Наклон обычно бывает чрезмерным.
На изображении справа буквы «ag» появляются первыми в Cambria как обычно и курсив, затем в Arial Unicode MS как обычно и (поддельный) курсив. Буквы «аг» обычно имеют довольно разные формы курсивом; что относится к идее курсива. Когда они установлены в Arial Unicode MS, в котором отсутствует курсив, вы все равно можете применить e.грамм.
При применении «поддельного курсива» и «ложный жирный шрифт», браузеры могут выделять курсивом или жирные символы, которые сильно искажаются в таких процессах - подумайте насчет наклона вертикальной черты «|». Даже если персонаж остается узнаваемым, часто принимает неправильную форму. Курсив предполагается подобрать тот или иной дизайн на букв , а не на наклон любого персонажа.Есть два способа предотвратить неправильные эффекты:
- Разделите элементы на последовательности элементов, чтобы специальный
персонажи не пострадают. Например, вместо
значок ⌛ .
написать
Значок ⌛ .
- Дополните таблицу стилей настройками, предотвращающими
браузеры от выделения курсивом или жирным шрифтом символов в элементах
которые вы определили как принадлежащие к особому классу:
.специальный {font-style: normal; font-weight: нормальный; }
Различия между характером и стилем
Во многих случаях разница между двумя символами в тексте может рассматриваться либо как различие символов, либо как различие в стиль визуализации для одного символа. Например, в Юникоде много символов, выделенных курсивом или полужирным шрифтом аналоги обычных персонажей.
В основном лучше всего использовать стиль, чтобы иметь значение.Например, мы показываем курсивом x, х , используя подходящую разметку HTML (например, элемент
i
), вместо того, чтобы искать курсив x как отдельный символ.Например, если вам нужны буквы Fraktur (Blackletter), например в математических текстах, вероятно, лучше всего использовать обычный буквы и стиль их. Вы бы использовали разметку вроде
z
и подходящий Правило CSS, например.frak {font-family: UnifrakturMaguntia}
для производства Frakturz, z.(В этом примере используется шрифт Google.)Другой подход (который можно рассматривать как теоретически лучше, но практически не так) такие персонажи, как U + 1D537 МАТЕМАТИЧЕСКИЙ ФРАКТУР МАЛЫЙ Z. Поскольку этот символ присутствует только в нескольких шрифтах, и ни один из них вероятно, установлен на компьютерах ваших посетителей, вы и в этом случае на практике потребуется использовать загружаемый шрифт. Это будет означать использование крупного шрифта, такого как Quivira или Symbola.
Проблемы с межстрочным интервалом
Когда смешиваются символы из разных шрифтов, межстрочный интервал может стать неравномерным. Ярким примером является то, что если некоторые символы взяты из шрифта Cambria Math, над и под любой строкой будет огромное количество места который их содержит.
Например, знак диаметра (⌀) и знак дюйма (″) требуются относительно часто. Однако они отсутствуют в большинстве шрифтов.Таким образом, авторы могут столкнуться с проблемой, когда попытаются использовать эти символы вместо обычных, но логически и типографически низшие замены, такие как буква o на stroke () и Ascii кавычка (").
Причина в том, что шрифты имеют разную высоту строки по умолчанию. Высота строки - это расстояние между базовыми линиями текста. Настоящий высота строки определяется максимальной высотой строки его персонажей.
Например, для текста шрифтом Cambria размером 16 пикселей, высота строки по умолчанию обычно составляет 19 пикселей (в зависимости от браузера).Для Arial Unicode MS того же размера высота строки по умолчанию составляет 21 пиксель, что вызывает некоторое беспокойство. Но в Cambria Math высота строки по умолчанию составляет 89 пикселей, вызывая грубый эффект.
Простое исправление - установить
line-height
. свойство в CSS. Его значение можно указать как чистое число, которое интерпретируется относительно шрифта размер элемента. Типичные значения по умолчанию - около 1,2, но вы можете использовать большее значение, например 1.3 особенно если в тексте есть высокие символы. Важно сгладить различия в тексте. Образец таблица стилей:
* {высота строки: 1,25; }
Веб-шрифты
веб-шрифтов, т.е. шрифтов, которые автоматически загружаются с веб-сервер клиенту, может решить проблемы со шрифтами. Одна из проблем заключается в том, что для охвата большинства браузеров вы должны необходимо сделать шрифт доступным в разных форматах.
Вы можете использовать такие инструменты, как Генератор Font Squirrel @ font-face, который генерирует нужные файлы шрифтов и файл CSS для их использования. Оно имеет Параметр «Эксперт» в его пользовательском интерфейсе для выбора например набор номеров Unicode или диапазонов чисел, чтобы избегайте встраивания крупного шрифта целиком. Однако генератор работает медленно и не работает для некоторых шрифтов (просто ничего не производит).
Другой сервис - CodeAndMore, который работает быстро и работает даже с некоторыми шрифтами, которые Font Squirrel не может справиться.Но в нем нет ничего соответствующего Вариант «Эксперт». Для больших шрифтов результирующие файлы таким образом, может быть довольно большим.
Существуют также другие службы преобразования шрифтов, такие как Фонти (бета).
Помните, что в этой области также есть поддельные услуги, например сервисы, которые на самом деле не делают ничего полезного, но пытаются убедить вы загружаете какое-то программное обеспечение (вредоносное ПО).
Однако веб-шрифты Google предложить простое решение.В настоящее время они подходят в основном для обычных текстов. на разных языках, а не на математических, технических или других специальные символы.
Например, кхмерская (камбоджийская) система письма плохо поддерживается шрифтами. Скорее всего, пользователь не видит Кхмерские буквы, если он не установил Code2000 или какой-нибудь специальный, Кхмерский шрифт. Вы можете значительно улучшить ситуацию, выбрав один из веб-шрифтов Google, поддерживающих кхмерский, сказать Suwannaphum, и использовать его на своем страницу следующим образом:
Затем вы обычно используете шрифт в CSS, например
.khmer {семейство шрифтов: Suwannaphum, Code2000; }
Шрифт Code2000 включен для устранения возможности того, что браузер пользователя настроен так, чтобы не использовать веб-шрифты. (Нет возможно, что Code2000 доступен, но вы всегда можете попробовать.)Следующая строка представляет собой кхмерский текст, в котором используется шрифт Google Web:
ខ្ញុំ អាច ញ៉ាំ កញ្ចក់ បាន ដោយ គ្មាន បញ្ហាУ Google есть действие, которое они называют Шрифты раннего доступа, поддержка нескольких языков, для которых может быть сложно в противном случае найдите подходящие шрифты, например бенгальский, грузинский, и каннада.
Персонажи как изображения
В первые дни Интернета было обычным делом представлять специальные персонажи как изображения. В настоящее время такие методы редко нужны, и вы получить намного лучший рендеринг с использованием символов. Но иногда нужно использовать символ, у которого слишком ограниченная поддержка шрифтов. Затем вы можете рассмотреть используя изображение. Это может быть более практичным выбором, чем используя загружаемый шрифт, если вам нужно всего один символ или несколько символов.
Например, если вам нужно использовать символ U + 1F300 CYCLONE в тексте, стоит побеспокоиться о шрифтах: только некоторые шрифты, такие как Quivira, Symbola и Unifont, содержат его. Но вы можете использовать в тексте как изображение:
если он у вас подходящего размера в cyclone.gif.Рекомендации:
- Подходящий размер примерно 80 на 80 пикселей.Он имеет разумный размер в байтах и приводит к разумному рендерингу. при уменьшении до размера текста.
- Изображение должно быть уменьшено в CSS
так, чтобы его высота была
0.8em
или что-то близкое к этому, напримерimg.char {height: 0.8em; }
. Указание высоты означает только то, что изображение масштабируется таким образом, что сохраняется пропорция его высоты к ширине. - По умолчанию изображение располагается на базовой линии текста.
Если вы хотите расширить его ниже, как в нашем примере,
установите
vertical-align: bottom
, и в этом случае высота может быть установлена на1em
или даже немного выше.Эти настройки следует учитывать при разработке изображения. - Лучше всего использовать формат GIF или PNG. SVG было бы лучше, но тогда вам нужно будет беспокоиться о поддержка браузера.
- Результат может быть довольно некачественным, особенно, если персонаж содержит много деталей.
Простой способ получить изображение, представляющее персонажа, - это использовать Поиск символов Юникода на FileFormat.info. Каждая страница описания персонажа содержит изображение символ шрифтом без засечек размером 100 на 100 пикселей PNG изображение.
Шрифты с фирменной кодировкой
Уловки, которые пытаются расширить репертуар персонажей со шрифтами в фирменной 8-битной кодировке еще в некоторой степени используется. Идея в них состоит в том, чтобы некоторый набор позиций символов от 0 до 255 в шрифте и убедить программы использовать этот шрифт.
Например, широко распространенный шрифт Symbol является таким шрифтом, как и шрифты Wingdings. Если вы напишете
X
в HTML, тогда правильным для браузера было бы показать букву X в какой-то другой шрифт, т.к. в Symbol нет буквы X.Вот как, например, Firefox себя ведет. Вместо этого многие браузеры (например, IE) отображают символ, помещенный в код позиции буквы X (58 в шестнадцатеричной системе), а именно греческого заглавная буква кси (Ξ).Подобные уловки со шрифтом Symbol были довольно распространены в первые годы. Интернета, но долгое время намного надежнее альтернативы существовали для любого символа, который появляется в символе.
Однако для некоторых систем письма этот подход все еще используется довольно часто.Если количество символов относительно невелико и символы не очень хорошо поддерживается общедоступными шрифтами, трюк выглядит так простое решение. В настоящее время сайты, которые его используют (например, Eenadu, газета на телугу, использует шрифт Eenadu) часто используют шрифт как веб-шрифт (загружаемый шрифт), поэтому большинство пользователей увидят текст, как задумано. Если они попытаются скопировать и вставить текст на телугу, они заметят, что он превращается в тарабарщину, как «H.».
Уловка работает и в этом случае в Firefox, но с некоторыми оговорками. не работает, если настройки браузера каким-либо образом запрещают использование определенного шрифта. Причина в том, что шрифт Eenadu не содержит информации о своем покрытие для персонажей.
Есть два документа, которые все же стоит прочитать, если использование этого трюка: считается вредным от Alis Technologies а также Используете FONT FACE для расширения репертуара? Алан Дж.Флавелл.
Новый трюк - использовать так называемые иконок шрифтов . Хотя можно создать правильно закодированный шрифт, содержащий набор значков символы (и, возможно, ничего больше), «шрифт значка» обычно означает шрифт , закодированный в частном порядке. Это означает, что он использует Кодовые точки частного использования, которые являются кодовыми точками, которые не назначен и никогда не будет назначен символу Unicode стандарт.Они предназначены для использования в соответствии с частными соглашениями. Очевидно, что они непригодны для обмена публичной информацией.
Такие «иконочные шрифты», вроде того, что предоставляет Twitter Bootstrap может оказаться очень удобным. Однако они полагаются по CSS и использованию определенного шрифта. Например, если браузер установлен игнорировать шрифты, предлагаемые на веб-страницах, пользователь будет увидеть общие символы неопределенных символов или, может быть, некоторые полностью разные значки, если браузер по каким-то причинам использует другой шрифт с некоторыми глифами в этих кодовых точках.
Однако использование графического шрифта имеет техническое преимущество, заключающееся в том, что рендеринг шрифтов основан на векторной графике и поэтому может создавать результаты лучше, чем масштабирование, например изображение в формате GIF или PNG.
Помимо обычного содержимого документа, браузеры могут обрабатывать другие тексты особым образом. Этот включает
- тексты всплывающих подсказок, указанные в заголовке
- альтернативный текст для изображений, указанный в атрибутах
alt
и отображается (во многих ситуациях) вместо изображения, когда изображение не может быть показано - названия страниц (заголовки), указанные в
элементы и обычно отображаются на верхней панели браузера или в виде значка вкладки
Шрифт (ы), используемый во всплывающих подсказках, зависит от браузера, который может использовать или не использовать настройки, сделанные на уровне операционной системы. Таким образом, он может управляться пользователем, хотя немногие пользователи знают об этом. В любом случае это не зависит от автора. Обычно в качестве шрифта используется простой шрифт без засечек небольшого размера, часто с ограниченным репертуаром персонажей, особенно в старых браузерах.
Это означает, что репертуар персонажей, которые вы можете там использовать, может варьироваться. Таким образом, другие символы могут отсутствовать, например, вместо этого показаны маленькие прямоугольники.
Отчасти по этим причинам авторы все больше и больше переходят к использованию других техник. чем
название
признак, а именно «Всплывающие подсказки CSS» (или, может быть, «всплывающие подсказки JavaScript»).Это позволяет использовать те же шрифты, что и в текстовом содержимом, или, при желании, установить некоторые другие подходящие шрифты.Простой способ настроить всплывающую подсказку CSS: использовать свой собственный атрибут, желательно так называемый
data- *
атрибут, сказатьdata-tip = "..."
, и используйте сгенерированный контент, чтобы показать его ценность при наведении курсора мыши.Какие символы я могу использовать?
Существует большое разнообразие шрифтов, поддерживаемых символами, от практически универсального до практически несуществующего.Невозможно указать список «безопасных» символы. Вам нужно взвесить важность использования специальных символов против рисков. Некоторые рекомендации и подсказки:
- Для текстов на европейских языках Коллекция WGL4 широко поддерживается в шрифтах Windows. платформ и в основном хорошо поддерживается на других платформах.
- Для отдельных персонажей, упомянутый выше FileFormat.Info сайт, раздел Символы, удобно использовать для оценки покрытия шрифта.Однако шрифт может существовать в нескольких версиях, и информация на том сайте в основном относится к новейшим версиям.