【问题标题】：Certain HTML Character Entities are HUGE in Firefox Only某些 HTML 字符实体仅在 Firefox 中是巨大的
【发布时间】：2024-01-02 06:51:01
【问题描述】：

出于某种原因，在我的 Firefox 12.0 for Mac OS X 中，我的〉 (&rang;) 字符比应有的大得多。在 Chrome 和 Safari 上，它们看起来正是我想要的样子。

我的.htaccess 中有AddDefaultCharset utf-8，<head> 中有<meta charset="utf-8">（因为我将这些文件交付给的组可能不会使用我的.htaccess）。

另外，根据 Adobe 的浏览器实验室，IE 7 和 8 只显示一个方框...有没有人可以让这些浏览器支持该字符？这会让事情变得更容易（因为颜色会发生变化，所以图像非常不方便，并且图像不会褪色）。

演示：http://cameronspear.com/demos/rang/

这是我在 Chrome 中看到并希望看到的：

这是我的 Firefox 显示的内容：

这是IE8浏览器实验室的截图：

TL;DR：我希望所有这些屏幕截图看起来都像第一个使用〉 aka &rang; 字符的屏幕截图。甚至可以接受使用 JavaScript。

谢谢。

[edit] 我应该指定 &rang; 字符并不重要，因为我可以使用 CSS 更改其颜色并使其在多个浏览器中看起来相同。

解决方案

我只是想准确地分享我为后代所做的一切。

感谢 Pointy 的提示和资源，我使用“How to make your own icon webfont”中描述的模板和方法创建了自己的 SVG 和 Inkscape。我将一个大尖括号映射到X，将一个小尖括号映射到x。

我遇到的一件事是我的角度需要触及基线，并且只有大约 72% 到盒子顶部才能适合“内联”，所以大写 X 是我原来的太高的角度，并且小写的 x 是更内联的。

然后我使用http://www.freefontconverter.com/ 将我的SVG 转换为TTF 并使用http://www.fontsquirrel.com/fontface/generator 转换为网络字体

...就是这样。

演示 (http://cameronspear.com/demos/rang/) 仍在进行中。您可以看到它在所有浏览器中看起来都是一致的，并且 onclick 旋转动画非常接近点等。

[更新] 我发现了一个名为 IcoMoon 的很棒的资源，它有助于为网络制作字体和组织字体，它接受常规的 svg 向量，因此您可以在 Illustrator 中制作它而不是乱七八糟使用 Inkscape，因为 IcoMoon 处理键盘映射和其他东西。您只能导出您使用的图标，因此您只需加载 3 或 4 个图标（如果您只需要）而不是整个字体。

它已成为一种无价的资源，我建议其他想要进入 Icon Fonts 的人检查一下。您可以通过CSS-Trick's 113th Screencast了解更多关于整个过程的信息。

【问题讨论】：

他们在 FireFox 中看起来不错。至于 IE，除了创建自己的图标字体（这并不是真的那么难，而且你可以完全控制图形）之外，你可能无能为力。
即使在 chrome 中它们对我来说也是方盒子
我在 Chrome 21.0.1155.2 dev-m 中得到了方块，但也许这是一个开发通道错误？ i.imgur.com/NU6qT.png
我在 Chrome 中看到了这些符号。我确定这取决于您系统上的默认衬线字体。我在 Linux 上，我认为它的默认字体包含大量 Unicode 符号的符号。
它们在 Windows 7 上的 Firefox (13)、Chrome (19)、Opera (11.64) 和 IE(9) 中看起来不错。我怀疑 IE7/8 块字符问题是由于字体支持比字符支持。

标签： javascript html css icons

【解决方案1】：

你会使用图片吗？它们将在所有浏览器中提供一致的外观。在许多情况下，图像比字符符号更可取。

【讨论】：

图标字体也可以在所有浏览器中提供一致的外观。
通常我同意，我只知道颜色会变化很多，我不想每次都更新图标。我是一名程序员，我想尽可能地脱离 Photoshop。有一次，我们让它在悬停状态之间褪色，如果我们回到那个状态，如果箭头也能过渡颜色会很好，而不仅仅是立即变为白色/黑色，你知道吗？
@Pointy 在这一点上，图标字体似乎是完美的解决方案。在这一点上，我的预算远远低于预算，所以也可以，嗯？你能指点我一个制作/教我做的好网站吗？把它放在一个答案中，我会正确标记它。谢谢。

【解决方案2】：

制作图标字体很容易，我可以做到，尽管（对我而言）这个过程有点神秘。我怀疑有很多真正的图形艺术家在这方面做得更好，而且肯定有很多人比我更了解技术细节。

Here 是一篇关于该主题的非常详尽的博文。（不是 mny 博客。）它没有很好描述的主要是 Inkscape“艺术板”区域与字体中每个字形的垂直定位之间的关系。它涉及到一些细节，但我一直无法弄清楚。

因此，我所做的只是制作一个边长为 1024 像素的方形画板。然后我在 Inkscape 中设置了一个网格，以便将艺术板划分为 16x16 网格。这使得（有点）容易设计以 16px 字体大小呈现良好的字符。（当然，如果需要，您可以针对不同的字体大小；16x16 适合需要非常小的东西。）然后，我只是确保当我将字形放在页面上时，它们在没有填充的 1em x 1em 框（或 16px x 16px；但是你想在 CSS 中这样做）。我使用<i> 标签，并给他们display: inline-block。这给了我很大的灵活性，而且通常效果很好。

Inkscape SVG 字体工具，委婉地说，非常原始。这实际上是某人夏季项目的结果。它可以工作，但仅此而已。 经常保存。

现在生成字体文件的过程有些疯狂。我使用字体松鼠。我上传了从 Inksccape 保存的 .svg，然后要求提供 EOT、WOFF 和 TTF。令人惊讶的是，它有效。

如果您只需要一些字形，这是一个非常不错的方法，因为您需要下载一个很小的字体文件，它会被浏览器缓存。然而，存在一些可访问性问题，并且这种做法引起了足够的争议，以至于社区中一些更*的成员可能会认为你这样做是野蛮人:-)

【讨论】：

看起来不错！今天下午我得试一试，然后告诉你。非常感谢您提供这篇文章和资源。
嗯...我很讨厌矢量化的东西，但这绝对是解决方案！幸好它是一个如此简单的符号。

【解决方案3】：

这是字体问题。为了最大限度地提高正确呈现稀有字符（大多数字体中不存在的字符）的几率，请指定一个包含该字符的最大字体列表。

页面现在只在包含括号的span 元素上设置了font-family: Arial,sans-serif。由于 Arial 不包含它，因此每个浏览器都将使用自己的 sans-serif 定义。如果它映射到的地图不包含括号，聪明的浏览器会尝试一些聪明的事情，比如扫描系统中的其他字体，但这仍然可能导致它缺少任何字形。

还有一个问题。通常，使用&rang; 之类的实体引用而不是字符本身并不重要，但在这里确实如此。在 HTML 4.01 中，&rang; 表示 U+232A；在 HTML5 草案中，这意味着 U+27E9。 IE 在这里遵循 HTML 4.01，而 Firefox 使用 HTML5 定义。所以最好使用你真正想要的字符，无论是在 UTF-8 编码中，还是作为字符引用&#x232a;。

如果您可以检查，例如font coverage for U+232A 并按优先顺序编写字体。但是您应该检查所有字体是否都给出了可接受的显示。例如，如果使用 Cambria Math，则默认行高会非常大，因此您可能希望将 line-height 显式设置为某个合理的值，例如 1.3。

最后——这也许应该首先被问到——你真的要使用直角括号还是数学直角括号？它们是括号，与左尖括号配对使用，而不是箭头符号。

更多信息：Guide to using special characters in HTML。

【讨论】：

我想为您提供有关字符编码和字体的所有有见地的信息。我在追求这个解决方案的过程中学到了很多东西，但它并没有让我到达那里，所以这就是 Pointy 检查复选标记的原因。不过，感谢您提供的所有重要信息！