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

Question

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

这些分别是Unicode ✔和✘。在我的所有浏览器上都可以正常工作。然而，我的一些测试人员报告说他们看到的是盒子，而不是这些符号，我发现这是由于他们没有安装字体造成的。参考

为了使其兼容性更好，我的选项似乎受到限制:

1. 将符号变成图像
2. 找到一个更适合、更兼容的符号来代替。

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

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

任何其他的解决方案也欢迎。

- Amber

---

使用斜体，绿色的V和红色的X。 - LittleSweetSeas

如果您不想使用斜体字的 v 和 _x_，请不要依赖字体，在这里使用图片 - 您无法知道客户端设备将如何呈现您的页面以及它支持什么字体和字符字形。 - mas.morozov

为什么不直接使用font-face来传送支持这些符号的字体？ - robertc

如果您使用EOT格式的字体，则“font-face”可以在IE5.5上运行。请阅读Bulletproof @font-face Syntax，或者使用其中一个为您完成所有操作的服务。 - robertc

font-face在移动浏览器中有良好的支持，但并非绝对良好 - http://caniuse.com/fontface - mas.morozov

Answer 1

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

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

仅为获取两个字符而使用嵌入式字体会有些不成比例。使用图标字体技巧将导致可访问性问题（您真的无法听到一个空元素，对吧）。

使用“v”和“x”等替换字符会给人留下不专业的印象，并可能导致理解上的问题。

请注意，“✔”和“✘”符号并不是普遍通用的。在某些文化中，“✔”传统上被用来表示错误（不正确），而“✘”可能被视为中性的勾号（表示已经检查了某些内容，但不暗示正面或负面结果）。因此，也许您无需采取额外措施来使用它们。一些单词（当然可以本地化，如果应用程序或页面作为一个整体需要本地化）可能会被代替使用。至少对于正确性，“OK”被广泛理解，几乎不会被误解。

- Jukka K. Korpela

Answer 2

我会：

• 寻找包含这些符号的字体
• 使用@font-face在我的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>

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

- Eric

Answer 3

你可以使用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图标，可以查看完整列表）。

- Reeno