✔ 和 ✘ 缺少字体时兼容的替代方案答案

【问题标题】：✔ and ✘ compatible alternative when lacking font✔ 和 ✘ 缺少字体时兼容的替代方案
【发布时间】：2013-11-08 16:26:46
【问题描述】：

我正在尝试制作一个包含符号 ✔ 和 ✘ 的页面。

它们分别是 Unicode &#10004; 和 &#10008;。它适用于我所有的浏览器。但是，我的一些测试人员报告说有框而不是这些符号，我发现这是由于他们没有安装字体。 Reference

我使其兼容的选项似乎仅限于：

改为制作符号图像
找到一个合适的、更兼容的符号来代替。

我不想使用图像，所以我正在寻找不需要特定字体的类似符号。

因此，我正在寻求建议，哪些符号不需要特定的字体，因为我无法在网上找到该信息。（我之前不知道这些需要它们）

也欢迎任何替代解决方案。

【问题讨论】：

使用斜体、绿色 V 和红色 X
我认为这是一个骗子stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml
如果你不想使用斜体v和x，这里不要依赖字体，使用图片——你不知道是什么客户端设备将呈现您的页面以及它支持的字体和字符字形。
为什么不直接使用font-face 提供支持符号的字体？
font-face 在移动浏览器中提供良好但不是绝对良好的支持 - caniuse.com/fontface

标签： html css unicode fonts

【解决方案1】：

我愿意：

找到包含这些符号的字体
使用@font-face is my css 来加载相关字体
使用我找到的字体在我的 css 中定义一个 span.myfont

例如使用在http://www.fontsquirrel.com/fonts/entypo?q[term]=entypo&q[search_check]=Y上找到的entypo webfontkit

css：

@font-face {
    font-family: 'entyporegular';
    src: url('Entypo-webfont.eot');
    src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'),
     url('Entypo-webfont.woff') format('woff'),
     url('Entypo-webfont.ttf') format('truetype'),
     url('Entypo-webfont.svg#entyporegular') format('svg');
font-weight: normal;
font-style: normal;

}
span.symbols { font-family: 'entyporegular'; /*rest of your css here*/}

HTML：

<span class="symbols">&#87;</span>
<span class="symbols">&#88;</span>

以这种方式使用网络字体可以确保独立于系统字体并确保加载正确的字符

【讨论】：

【解决方案2】：

您可以为此使用Font Awesome。在您的 HTML 头部中包含以下内容：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

然后使用<i class="fa fa-check"></i>或<i class="fa fa-times"></i>来显示check和times这两个图标（也许times还有一个更好的，看看complete list）

【讨论】：

【解决方案3】：

在字体中没有更广泛支持的合适字符。也就是说，其他有些相似的字符的字体支持更加有限。

如果您想使用这些特定符号，最实用的方法是使用足够大的图像（大约 50×50 像素）并使用 CSS 缩小以匹配字体大小（例如在 CSS 中使用 height: 0.7em），具有足够的alt 属性，例如OK 和wrong。

使用嵌入字体来获取两个字符会有些不成比例。使用图标字体技巧会导致可访问性问题（你真的听不到空元素，对吧）。

使用诸如“v”和“x”之类的字符作为替代品会给人一种不专业的印象，并可能导致理解上的问题。

请注意，符号“✔”和“✘”不是通用的。在某些文化中，“✔”传统上用于表示错误（不正确），而“✘”可能被视为中性复选标记（表示某事已被检查，但不暗示肯定或阴性结果）。所以也许你不需要采取额外的措施来使用它们。可以使用一些词（当然，如果应用程序或页面作为一个整体是可本地化的，则可本地化）来代替。至少在正确性方面，“OK”被广泛理解，几乎不会被误解。

【讨论】：