Юникод и шрифты
Это то, что я не вижу много обсуждается. Я занимаюсь разработкой программного обеспечения, которое будет поддерживать многоязычие, поэтому мне нужно будет использовать шрифты, совместимые с Unicode, верно? Где я мог бы найти такие шрифты и как бы я точно знал, что они поддерживают китайский, корейский, японский, что бы там ни было?
Жаль, что вы не можете использовать красивые шрифты, найденные в Интернете, потому что большинство из них поддерживают только ASCII.
4 ответа
Просто чтобы убедиться: не ожидайте найти шрифт, который поддерживает китайский традиционный, китайский упрощенный и японский.
Существуют отличия глифа для тех же кодовых точек Unicode, поэтому нативный пользователь сразу заметит, что вы не используете правильный шрифт для своего языка.
Для веб-приложения, вероятно, лучше дать список шрифтов, и в списке вам нужен типичный шрифт Windows, типичный шрифт Mac и общий (например, "засечек").
Пометка HTML-страницы (или абзаца) соответствующим тегом lang поможет некоторым (более умным) браузерам выбрать правильный шрифт, если определенные не установлены.
Из моей коллекции закладок Юникод / шрифт
http://en.wikipedia.org/wiki/Category:Free_software_Unicode_typefaces
http://en.wikipedia.org/wiki/Unicode_typefaces
http://unifoundry.com/unifont.html
http://www.fileformat.info/info/unicode/font/index.htm
http://www.alanwood.net/unicode/fontsbyrange.html
http://www.alanwood.net/unicode/fonts.html
http://www.alanwood.net/unicode/fonts.html
На сайте Алана Вуда есть множество шрифтов Unicode. Для каждого шрифта есть список, объясняющий, какие языки поддерживаются им.
Еще один замечательный сайт - это шрифт в Unifont. Чтобы найти его просто в Google, не имейте репутацию, чтобы связать это еще. Находясь там, просто нажмите вкладки континентов в верхней части сайта, чтобы просмотреть шрифты, включая языки из этих стран.
Вы можете создавать свои собственные веб-шрифты с помощью таких инструментов, как приложение Icomoon.
Приложение Icomoon позволяет выполнять каждое из следующих действий:
- Получить один или несколько значков из нескольких популярных значков шрифтов
- Загрузите другие шрифты, которые могут быть как шрифтами значков, так и обычными шрифтами
- Загрузить файлы SVG для использования в качестве глифов
- Объедините любое количество символов из любого количества доступных шрифтов
- Установите шестнадцатеричное значение UNICODE для любых нужных вам символов
- Экспорт и / или сохранение созданного вами шрифта
Я использовал приложение Icomoon для создания шрифта смайлика Emoji, а также для создания пользовательских значков шрифтов для каждого проекта.
Чтобы включить значок шрифта в ваш CSS, вы можете включить следующий код:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Чтобы использовать значок в своем HTML, вы можете выполнить одно из следующих действий:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
Если вы хотите выбрать метод 7, вам понадобится дополнительный код CSS. Этот код CSS будет выглядеть так:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Иконочные шрифты, такие как Iconic, Font Awesome или Glyphicons, как правило, все используют метод 7. Это позволяет избежать необходимости вставлять или вставлять специальные символы из шпаргалки или использовать HTML-объекты.
Это, однако, метод, который имеет несколько недостатков. Прежде всего, требуется поддержка :before CSS-селектор и использование escape-последовательности для символов UNICODE. Ни IE6-7, ни определенные версии Webkit не предоставляют такую поддержку.
Другим недостатком является то, что вы должны использовать отдельный тег HTML для каждого значка, причем каждый тег соответствует одному символу из шрифта значка. Отображение нескольких значков в теге HTML невозможно в методе 7, в отличие от других методов.
Другие методы имеют свои недостатки, однако. Методы 1, 3 и 5 требуют от вас скопировать и вставить символ из шпаргалки или использовать средства для помещения самого символа в ваш код. Ваш редактор кода может не отображать этот символ или он может отображать символ, отличный от того, который указан в шрифте значка, если шрифт значка использует нестандартное отображение этого символа.
Методы 1, 3 и 5 также требуют, чтобы ваш браузер использовал правильную кодировку для отображения правильного символа. Для символов UNICODE это не так очевидно, как для символов ASCII. Это должно быть обеспечено добавлением метатега. <meta charset="utf-8" /> где-то в head вашего HTML-документа.
Методы 2, 4 и 6 не требуют, чтобы вы копировали и вставляли символ, однако это делает ваш код менее читаемым людьми и делает любые изменения в коде более подверженными человеческим ошибкам. Кроме того, так как вам нужно будет искать код HTML-сущности для каждого из значков, которые вы хотите использовать, или вам нужно будет запомнить их. Хотя то же самое очевидно относится и к классам, используемым в методе 7, эти классы гораздо легче запомнить, чем код сущности HTML.