是的，有这样的方法。操作步骤如下。
创建字体
为了避免使用巨大的字体来支持一些特殊字符，您可以使用像Icomoon App这样的工具创建自己的字体。
Icomoon App 允许您执行以下每个操作：
- 从几个流行的图标字体中获取一个或多个图标
- 上传其他字体，可以是图标字体也可以是常规字体
- 上传 SVG 文件以用作图标
- 从任意数量的可用字体中组合任意数量的图标
- 设置您需要的 UNICODE 十六进制值的字符
- 导出和/或保存您创建的字体集
我使用 Icomoon App 创建了表情符号字体，并且还用于按项目创建自定义图标字体。
使用字体
要在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选择器和使用UNICODE字符的转义序列。IE6-7和某些版本的Webkit都不提供此支持。
另一个缺点是，每个图标都必须使用单独的HTML标签，每个标签对应一个图标字体中的一个字符。与其他方法不同，使用方法7无法在一个HTML标签中显示多个图标。
其他方法也有自己的缺点。1、3和5需要你从作弊表中复制粘贴字符或使用手段将字符本身放入代码中。如果图标字体使用非标准映射该字符，则你的代码编辑器可能无法显示该字符，或者可能显示与图标字体中不同的字符。
方法1、3和5还要求你的浏览器使用正确的编码来显示正确的字符。对于UNICODE字符来说，这并不像ASCII字符那样显而易见。然而，通过在HTML文档的
head中添加元标记可以确保这一点。
方法2、4和6不需要你复制粘贴字符，但它会使你的代码对人类更难读，并使任何对代码的更改更容易出现人为错误。此外，你需要查找每个想要使用的图标的HTML实体代码或者需要记忆它们。虽然相同的方法7中使用的类也适用于这一点，但是那些类比HTML实体代码容易记忆得多。
