某些HTML角色实体仅在Firefox中很大
CWS*_*ear 7 html javascript css icons
出于某种原因,在我的Mac OS X的Firefox 12.0中,我的⟩(⟩)字符比它们应该大得多.在Chrome和Safari上,它们看起来就像我想要的那样.
我有AddDefaultCharset utf-8我的.htaccess,以及<meta charset="utf-8">在我<head>(作为组我提供这些文件,不得使用我的.htaccess).
此外,根据Adobe的浏览器实验室,IE 7和8只显示一个方框...有没有人可以让这些浏览器支持该角色？这将使事情变得更容易(因为颜色将会发生变化,因此图像非常不方便,图像也不会褪色).
演示:http://cameronspear.com/demos/rang/
这是我在Chrome中看到的并期望看到:
这是我的Firefox显示的内容:
这是来自IE8浏览器实验室的截图:
TL; DR:我希望所有这些截图看起来像是第一个使用⟩又名⟩字符的截图.使用JavaScript甚至可以接受.
谢谢.
[编辑]我应该指出,我没有那么重要我有这个⟩角色,因为我能够用CSS改变它的颜色并让它在多个浏览器中看起来一样.
解
我只想分享我为后人所做的事情.
感谢Pointy的提示和资源,我使用" 如何制作自己的webfont图标 "中描述的模板和方法,使用Inkscape创建了自己的SVG.我将一个大角度支架映射到一个小角度支架.Xx
我碰到的一件事是,我的角度需要触及基线,只有72%的路径到达顶部以适合"内联",所以大写X是我原来的太高了,小写x是更内联的一个.
然后,我将我的SVG到TTF与http://www.freefontconverter.com/并转换为web字体与http://www.fontsquirrel.com/fontface/generator
......就是这样.
演示(http://cameronspear.com/demos/rang/)仍在使用.您可以看到它在所有浏览器中看起来都是一致的,并且onclick旋转动画已经接近该点等.
[更新]我找到了一个名为IcoMoon的优秀资源,它有助于为网络制作字体和组织字体,并且它接受常规的svg向量,因此你可以在Illustrator中制作它,而不是乱用Inkscape,因为IcoMoon处理键盘映射和东西.您只能导出您使用的图标,因此您只需加载3或4个图标(如果这是您需要的全部字体).
它已成为宝贵的资源,我建议其他想进入Icon Fonts的人查看它.您可以从CSS-Trick的第113次截屏视频中了解有关整个过程的更多信息.
制作图标字体很容易，我可以做到，尽管（对我来说）这个过程有点神秘。我怀疑有很多真正的图形艺术家在这方面做得更好，而且肯定有很多人比我更了解技术细节。
这是一篇关于该主题的非常详尽的博客文章。（不是 mny 博客。）它没有很好地描述的主要内容是 Inkscape“艺术板”区域与字体中每个字形的垂直位置之间的关系。它涉及一些细节，但我一直无法弄清楚。
因此，我所做的只是制作一个边长为 1024 像素的方形画板。然后我在 Inkscape 中设置了一个网格，以便将艺术板划分为 16x16 的网格。这使得设计在 16px 字体大小下能够很好地渲染的字符（在某种程度上）变得容易。（当然，如果您愿意，您可以选择不同的字体大小；但是，16x16 对于需要非常小的内容来说很有用。）然后，我只是确保当我将字形放在页面上时，它们位于1em x 1em 框（或 16px x 16px；但是您想在 CSS 中执行此操作），没有填充。我使用<i>标签，并给它们display: inline-block. 这给了我很大的灵活性，而且通常效果很好。
温和地说，Inkscape SVG 字体工具非常原始。这实际上是某人夏季项目的结果。它确实有效，但也仅仅只是勉强而已。 经常保存。
现在生成字体文件的过程有点疯狂。我用的是FontSquirrel。我上传从 Inksscape 保存的 .svg，然后请求 EOT、WOFF 和 TTF。令人惊讶的是，它有效。
如果您只需要一些字形，这是一个非常好的方法，因为您将需要下载一点字体文件，并且它会被浏览器缓存。然而，存在一些可访问性问题，并且这种做法颇具争议，以至于社区中一些更狂热的成员可能会认为您这样做是野蛮人:-)
| 归档时间： |
|
| 查看次数： |
828 次 |
| 最近记录： |