我一直在以网页设计师仓库和intridea的文章为起点制作自己的webfont 。

我知道不同的引擎以不同的方式呈现字体，但我遇到的问题是 firefox 呈现的字体高于 chrome - 在我显示字体的大小下，这非常明显（3 或 4 px - 在按钮上意味着它们'重新完全错位）。

我还参考了Github 的 occticon 文档- 在查看 occticons 如何比较浏览器时，它们看起来很棒！据我所知，没有明显的区别。他们是如何做到这一点的？

我正在使用 inkscape 并尝试了几个不同的 svg 入门模板。安装程序Set width: 1024已经尝试过各种尺寸的图标，但没有不同的结果。即 512pt 正方形并在基线下方对齐。

我的问题是在创建 webfont 时我需要遵守哪些规则才能获得浏览器渲染字体之间的最小差异？

谁能解释一下左上角或页面底部中心的小八角猫标志是如何实现的，为什么？

我只能看到这个标记：

这个CSS：

我在那里看不到图片，所以我猜他们正在使用该字体。但是为什么会有那个奇怪的  字符，为什么它在样式中而不是在 HTML 中？

生成的图标过大，即使字体大小设置为 16 像素，它看起来也像 32 像素甚至更大。

我使用 [Octicons][2] 方法来构建图标，因此 Glyphs 设置如下所示：

1. 每个 Em 的单位是 2048
2. Metrics 就像 Octicons
3. 字形宽度设置为 2048
4. 网格间距设置为 32

是否有某种图标集可用于Android包含类似于 GitHub Icons的图标。例如，事件 push、pull、fork、merge、comment ...

还是这只能在浏览器中实现？

我希望UTF-8在 a 中使用编码，Textview但它没有正确渲染。根据我的阅读，这是一组专有的UTF字符代码。

我最喜欢的字体是 Inconsolata，它把 GitHub 的 ocicon web 字体弄乱了。昨天我更新了 Google Chrome 的用户样式表，以便在 GitHub 上正确显示 ocicon 字体，所以今天我试图让 CJK 字符正确显示。

我的 CSS：

我捕获了完整的 CJK 范围，但字符仍然无法正确显示。我是否使用了错误的本地字体？（我正在运行 Debian 6。）

更新：修复只是安装ttf-takao包。

工作代码，带有说明：

https://github.com/cureadvocate/chrome-user-stylesheet

推理

我通过LESS 的方法将小型 SVG （图标）与我的 CSS捆绑在一起，以减少类似于 Octicons 或 Ye Olde CSS Sprites 等图标字体的目的的HTTP请求。data-uri

但是，LESS 将它们编码为Base64。
这在 SVG 的情况下是次优的，它可以是 UTF-8 中的数据 URI（示例）。

这是次优的三个原因：

1：Base64 对文本很傻

Base64 的目的是对二进制数据进行编码，每字节仅使用 6 位，使其可以安全地嵌入到文本文件中。这对于 PNG 和 JPEG 非常有用，但它会使任何文本文件无缘无故地增大 33%。如果您现在正在考虑“很好gzip地解决这个问题”，请记住...

2：在 Base64 中编码文本会gzip降低效率

要了解为什么会这样，请考虑以下问题：

作为一个实际的例子，让我们用一个实际的 SVG进行实验：

即使经过 gzip 压缩，它仍然大了约 35%。

3：它忽略了一些免费的冗余来源

想想width上面的例子。每个 SVG 都会有这个子字符串，如果你在 CSS 中嵌入 SVG，你可能会在其他地方（或其他地方）有这个关键字，这gzip可能会受益（因为这是Huffman Coding的工作方式），但如果它被隐藏则不会Base64。

问题

如何data:使用 UTF-8 而不是 Base64 将 SVG 作为 URI 嵌入到 LESS 中？

我可以想象一千种涉及Grunt之类的构建工具的方法，但它破坏了我的工作流程，因为我无法style: include:less all.less从Jade视图（我在开发中这样做），甚至@import 'images.less';无法从更少的文件中执行操作.

我正在使用 Java Jsoup 来获取一些详细信息。

我有上面的部分使用..

有什么办法可以得到“美国爱达荷州考德威尔”的文字？我正在尝试使用类名'ocicon occticon-location'，因为我需要单独获取所有这些属性（仅当它们可用时）。

有没有推荐的方法让图标字体（例如 FontAwesome/Octicons）渗入 Shadow DOM？

目前，当我想在自定义元素的 Shadow DOM 中使用图标时，我必须在 Shadow DOM 中包含部分ociticons.css文件内联：

（显然，@font-face确实会渗入 Shadow DOM。）

当我测试 GitHub Markdown API ( https://developer.github.com/v3/markdown/ ) 时，我会在转换简单的“# Headline”时在 h1 标签内获得一个链接。

这是我发送的：

curl --data '{"text":"#Headline","mode":"markdown"}' https://api.github.com/markdown

这就是我得到的：

<h1> <a id="user-content-headline" class="anchor" href="#headline" aria-hidden="true"><span class="octicon octicon-link"></span></a>Headline</h1>

这是我期望得到的：

<h1>Headline</h1>

有谁知道为什么会发生这种情况以及如何避免它？

谢谢。

我只是在浏览 github.com 页面的源代码，我看到他们使用一些代码来添加到剪贴板按钮图标

这如何创建一个没有图像路径的图标？