我使用的CSS按钮图标但无图象 .The图标使用Unicode值生成。
在此我面对一些浏览器不支持某些Unicode值的问题。 因此，而不是正确的图标它显示了一些不需要的符号。
在我们有什么措施来遵循任何浏览器提供了对Unicode的支持？
Answer 1:
这主要是字体问题，但如果在你的CSS列出的字体不包括某些字符，则不同的浏览器将以不同的方式使用后备字体。 固化是，试图找到字体列表，可能涵盖了所有你使用的字符。 这样做的难度很大程度上取决于你使用的字符。 在按钮使用最近推出的人物大多是没有意义的，因为图像更可靠地工作。 使用文本字符正确的是一个不同的问题。 见我的指南在HTML中使用特殊字符的详细信息。
Answer 2:
支持Unicode的在所有支持的所有字符编码所有的浏览器，但不是所有的字体对所有Unicode字符的字符字型。
因此，为了得到你想要的，你需要提供具有这些字符的字体下载，在所有不同的操作系统使用的格式字符的支持。
Answer 3:
您可以使用类似的工具创建自己的字体Icomoon应用 。
该Icomoon应用程序允许你做以下每一项：
- 从几个流行的图标字体获得一个或多个图标
- 上传其他字体，这可能是图标字体，还支持常规字体
- 结合任意数量的图标从任意数量的可用字体
- 设置你需要哪个字符UNICODE十六进制值
- 出口和/或保存您创建的字体集
我用Icomoon应用程序创建的绘文字表情符号字体 ，以及用于在每个项目的基础上创建自定义图标字体。
为了在你的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";
}
图标字体像标志性的 ， 字体真棒或Glyphicons通常都使用方法7.本，以避免你不得不从小抄复制粘贴特殊字符或被迫使用HTML实体。
它是，但是，有几个缺点的方法。 首先，它需要的支持:before CSS选择器和Unicode字符使用转义序列。 无论IE6-7也不Webkit的某些版本中提供这种支持。
另一个缺点是，你必须使用一个单独的HTML标记每个图标，对应于从图标字体一个字符每个标签。 HTML标签中显示几个图标是不可能的方法7，不像其他方法。
其他方法都有自己的缺点，虽然。 方法1,3和5需要你复制粘贴一张小抄或使用的字符意味着把字符本身你的代码中。 代码编辑器可能不能够显示字符的或者如果图标字体使用非标准映射该字符它可以显示从一个在图标的字体不同的字符。
方法2，4和6不要求你复制粘贴的字符，但它使你的代码被人类的可读性，使的代码更容易出现人为错误的任何变化。 此外，因为您将需要查找的HTML实体代码每个图标要使用或者你需要记住它们。 而同样显然也适用于在方法7以及所使用的类，这些类是更容易使用比一个HTML实体代码记忆。
文章来源: Support for Unicode By browser
