某些HTML角色实体仅在Firefox中很大

时间：2012-06-04 18:10:44

标签： javascript html css icons

出于某种原因，在我的Firefox 12.0 for Mac OS X中，我的⟩（&rang;）字符比它们应该大得多。在Chrome和Safari上，它们看起来就像我想要的那样。

我的AddDefaultCharset utf-8以及我.htaccess中的<meta charset="utf-8"> <head>（因为我提供这些文件的群组可能不会使用我的.htaccess }}）。

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

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

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

Chrome

这是我的Firefox显示的内容：

Firefox

这是来自IE8浏览器实验室的屏幕截图：

IE8

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

感谢。

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

解决方案

我只想分享我为后人所做的事情。

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

我遇到的一件事是，我的角度需要触及基线，并且只有大约72％到达顶部的方式以适合“内联”，因此大写X是我原来太高的一个，并且小写x是更内联的一个。

然后我使用TTF将我的SVG转换为http://www.freefontconverter.com/并转换为带有http://www.fontsquirrel.com/fontface/generator

的webfont

......就是这样。

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

[更新] 我找到了一个名为IcoMoon的优秀资源，可以帮助制作字体并为网络组织字体，并且它接受常规的svg向量，这样你就可以在Illustrator中制作它了因为IcoMoon处理键盘映射和东西，所以不要乱用Inkscape。您只能导出您使用的图标，因此您只需加载3或4个图标（如果这是您需要的全部字体而不是整个字体。）

它已成为宝贵的资源，我建议所有其他想要进入Icon Fonts的人查看它。您可以从CSS-Trick's 113th Screencast了解有关整个过程的更多信息。

3 个答案:

答案 0 :(得分：6)

你能使用图像吗？它们可以在所有浏览器中提供一致的外观。在许多情况下，图像优于字符符号。

答案 1 :(得分：2)

制作图标字体很容易，我可以做到，但（对我而言）这个过程有点神秘。我怀疑有很多实际的图形艺术家都比较擅长，当然很多人比我更了解技术细节。

Here是关于该主题的非常详尽的博客文章。（不是mny博客。）它没有很好描述的主要内容是Inkscape“艺术板”区域与字体中每个字形的垂直定位之间的关系。它进入了一些细节，但我从来没有弄明白。

因此，我所做的只是在一侧制作一个方形画板1024像素。然后我在Inkscape中设置了一个网格，以便将艺术板分成16x16网格。这使得（有些）容易设计出能够以16px字体大小呈现的字符。（当然你可以根据需要设定不同的字体大小; 16x16适合那些需要非常小的东西。）然后，我只是确保当我把字形放在页面上时，它们是在一个1em by 1em box（或16px by 16px;但是你想在你的CSS中这样做）没有填充。我使用<i>代码，然后给他们display: inline-block。这给了我很大的灵活性，它通常效果很好。

Inkscape SVG字体工具，说得温和，非常原始。这实际上是某人夏季项目的结果。它起作用，但不过是勉强。 经常保存。

现在生成字体文件的过程有点疯狂。我使用FontSquirrel。我上传从Inksccape保存的.svg，然后询问EOT，WOFF和TTF。令人惊讶的是，它有效。

如果你只需要一些字形，这是一个非常好的方式，因为你将有一个小的字体文件下载，它将被浏览器缓存。然而，有一些可访问性问题，这种做法充满争议，社区中一些更加狂热的成员可能会认为你是野蛮人： - ）

答案 2 :(得分：2)

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

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

还有一个问题。通常情况下，使用像&rang;这样的实体引用而不是字符本身并不重要，但这里确实如此。根据HTML 4.01，&rang;表示U + 232A;通过HTML5草稿，它意味着U + 27E9。 IE在这里遵循HTML 4.01，而Firefox使用HTML5定义。因此，最好使用您真正想要的字符，无论是UTF-8编码还是字符引用〉。

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

最后 - 也许这应该首先被问到 - 你真的想要使用正确的角度支架或数学直角支架吗？它们是括号，与左尖括号配对使用，而不是箭头符号。

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