Вы можете создавать свои собственные веб-шрифты с помощью таких инструментов, как Icomoon App .
Приложение 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";
}
Иконочные шрифты, такие как Иконические , Шрифт Awesome или Глификоны обычно все используйте метод 7. Это позволяет избежать необходимости вставлять или вставлять специальные символы из шпаргалки или использовать объекты HTML.
Однако этот метод имеет несколько недостатков. Прежде всего, требуется поддержка CSS-селектора :before и использование 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.