unicode - 通过浏览器支持 Unicode

Question

我正在使用带有图标但没有图像的 CSS 按钮。图标是使用 unicode 值生成的。
在这个问题上，我遇到了一些浏览器不支持某些 unicode 值的问题。因此，它不是正确的图标，而是显示一些不需要的符号。

要在任何浏览器中提供对 Unicode 的支持，我们必须遵循哪些步骤？

Answer 1

这主要是一个字体问题，但是如果您的 CSS 中列出的字体不涵盖某些字符，那么不同的浏览器将使用不同的备用字体。解决方法是尝试查找可能涵盖您使用的所有字符的字体列表。这样做的难度很大程度上取决于您使用的字符。在按钮中使用最近引入的字符大多没有意义，因为图像更可靠。在文本中正确使用字符是一个不同的问题。有关详细信息，请参阅我的在 HTML 中使用特殊字符的指南。

Answer 2

所有支持 Unicode 的浏览器都支持所有字符代码，但并非所有字体都具有所有 Unicode 字符的字符字形。

因此，要获得对所需字符的支持，您需要以所有不同操作系统使用的格式提供具有这些字符的字体的下载。

Answer 3

您可以使用Icomoon App等工具创建自己的字体。

Icomoon 应用程序允许您执行以下各项操作：

• 从几种流行的图标字体中获取一个或多个图标
• 上传其他字体，可以是图标字体，也可以是常规字体
• 从任意数量的可用字体中组合任意数量的图标
• 为您需要的任何字符设置 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 &#9733;&#9733;&#9733;&#9733;&#9734;!!</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">★★★★☆&lt;/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">&#9733;&#9733;&#9733;&#9733;&#9734;</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">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">☆&lt;/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">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9734;</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 实体。

It is, however, a method that has several downsides. First of all, it requires support for the :before CSS selector and the use of an escape sequence for UNICODE characters. Neither IE6-7 nor certain versions of Webkit provide this support.

Another downside is that you have to use a seperate HTML tag for each icon, with each tag corresponding to one character from the icon font. Displaying several icons within HTML tag is not possible with method 7, unlike with other methods.

Other methods have their own downsides, though. Methods 1, 3 and 5 require you to copy-paste the character from a cheat sheet or use means to put the character itself within your code. Your code editor may not be capable of displaying the character or it may display a different character from the one in your icon font if the icon font uses a non-standard mapping that character.

Methods 2, 4 and 6 do not require you to copy-paste the character, however it makes your code less readable by humans and makes any changes to the code more prone to human error. Also, as you will need to look up the HTML-entity code for each of the icons you want to use or you'll need to memorize them. While the same obviously applies to the classes used in method 7 as well, those classes are much easier to memorize than an HTML entity code.