7

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

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

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

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

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

铬合金

这是我的 Firefox 显示的内容：

火狐

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

IE8

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

谢谢。

[编辑] 我应该指定我拥有&rang;角色并不重要，因为我能够使用 CSS 更改其颜色并使其在多个浏览器中看起来相同。

解决方案

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

感谢 Pointy 的提示和资源，我使用“如何制作自己的图标 webfont ”中描述的模板和方法使用Inkscape创建了自己的SVG。我将一个大尖括号映射到.Xx

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

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

......就是这样。

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

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

它已成为一种无价的资源，我建议其他想要进入 Icon Fonts 的人检查一下。您可以从CSS-Trick 的第 113 期截屏视频中了解有关整个过程的更多信息。

4

3 回答 3

6

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

于 2012-06-04T18:18:05.070 回答
2

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

这是关于该主题的非常详尽的博客文章。（不是 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。令人惊讶的是，它有效。

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

于 2012-06-04T18:40:47.867 回答
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 编码中，还是作为字符引用&#x232a;。

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

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

更多信息：在 HTML 中使用特殊字符的指南。

于 2012-06-04T19:58:33.537 回答