我正在使用CSS按钮与图标但没有图片。 这些图标是使用Unicode值生成的。
在此过程中，我遇到了一个问题，某些浏览器不支持某些Unicode值。 因此，它会显示一些不希望出现的符号，而非正确的图标。
为了在任何浏览器中提供对Unicode的支持，我们需要采取哪些步骤？
支持 Unicode 的浏览器
14
- Prasad Jadhav
3个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
13
这主要是字体问题，但如果您在CSS中列出的字体没有涵盖某些字符，则不同的浏览器会以不同的方式使用替代字体。解决方法是尝试找到一组可能涵盖您使用的所有字符的字体列表。这样做的难度在很大程度上取决于您所使用的字符。在按钮中使用最近引入的字符大多是毫无意义的，因为图像更可靠。在文本中使用字符是一个不同的问题。有关详细信息，请参阅我的HTML中使用特殊字符的指南。
- Jukka K. Korpela
3
所有支持Unicode的浏览器都支持所有字符编码，但不是所有字体都具有所有Unicode字符的字符字形。
因此，为了获得您想要的字符支持，您需要提供一个包含这些字符的字体下载，以供所有不同操作系统使用的格式。
- Guffa
1
有没有包含几乎所有这些字符的字体？ - Prasad Jadhav
2
- 从几种流行的图标字体中获取一个或多个图标
- 上传其他字体，可以是图标字体，也可以是常规字体
- 组合任意数量的来自任意可用字体的图标
- 为您需要的任何字符设置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>
.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需要您从作弊表中复制粘贴字符或使用手段将字符本身放入代码中。如果图标字体使用非标准映射该字符，则您的代码编辑器可能无法显示该字符或显示与图标字体中不同的字符。
方法2、4和6不需要您复制粘贴字符，但这会使您的代码对人类更难读懂，并使对代码所做的任何更改更容易出现人为错误。此外，您将需要查找每个要使用的图标的 HTML 实体代码，或者您将需要记住它们。虽然方法7中使用的类也适用于相同的情况，但这些类比 HTML 实体代码容易记忆得多。
- John Slegers
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，