Web Designer Depotおよびintrideaの記事を出発点として、独自の Web フォントを作成しています。

さまざまなエンジンがフォントを異なる方法でレンダリングすることは知っていますが、私が抱えている問題は、Firefox がクロムよりも高いフォントをレンダリングすることです - フォントを表示しているサイズでは、これは非常に目立ちます (3 または 4 ピクセル - ボタン上でそれらを意味します)。完全にずれています）。

Github の octicon ドキュメントも参照しました。私が見る限り、目立った違いはありません。彼らはどのようにしてこれを達成したのですか？

私はinkscapeを使用しており、いくつかの異なるsvgスターターテンプレートを試しました。セットアップはSet width: 1024さまざまなサイズのアイコンを試してみましたが、結果は変わりませんでした。つまり、512pt の正方形で、ベースラインのすぐ下に配置されます。

私の質問は、Web フォントを作成するときに、ブラウザーでのフォントのレンダリングの違いを最小限に抑えるために、どのような規則を実装する必要があるかということです。

ページの左上隅または中央下部にある小さな octocat ロゴがどのように実装されているか、またその理由を説明できる人はいますか?

私が見ることができるのは、このマークアップだけです:

そしてこのCSS：

そこには画像が表示されないので、フォントを使用していると思います。しかし、なぜその奇妙な  文字があり、なぜ HTML ではなくスタイルにあるのでしょうか?

font-size が 16px に設定されていても、結果のアイコンは大きすぎて、32px またはそれ以上のように見えます。

[Octicons][2] アプローチを使用してアイコンを作成したため、グリフのセットアップは次のようになります。

1. Em あたりの単位は 2048 です
2. Metrics は Octicons とまったく同じです
3. グリフ幅は 2048 に設定されています
4. グリッド間隔は 32 に設定されています

推論

Octiconsや Ye Olde CSS Spritesなどのアイコンフォントの目的と同様の HTTP リクエストを削減するために、LESS のメソッドを介して小さな縮小SVG (アイコン) を CSS にバンドルしています。data-uri

ただし、LESS はBase64でエンコードします。
これは、UTF-8 でデータ URI を指定できる SVG の場合には最適ではありません ( example )。

これが最適ではない理由は 3 つあります。

1: Base64 はテキストには適していません

Base64 の目的は、1 バイトあたり 6 ビットのみを使用してバイナリ データをエンコードし、テキスト ファイルに安全に埋め込むことです。これは PNG と JPEG には最適ですが、理由もなくテキスト ファイルが 33% 大きくなります。「これでいいのか」と思っている方gzipはご注意ください。

2: Base64 でテキストをエンコードするgzipと、効果が大幅に低下します

この理由を理解するには、次のことを考慮してください。

実際の例として、実際の SVGを使って実験してみましょう。

gzip した後でも、まだ ~35% 大きくなっています。

3: 冗長性のいくつかの自由なソースを無視します

width上記の例について考えてみてください。すべての SVG にはこの部分文字列があり、SVG を CSS に埋め込む場合、おそらくこのキーワードは別の場所 (または別の場所) にあるgzip可能性があります。 Base64。

質問

data:Base64 の代わりに UTF-8 を使用してSVG を URI として LESS に埋め込むにはどうすればよいですか?

Gruntなどのビルド ツールを使用してこれを行うには何千もの方法を想像できますstyle: include:less all.lessが、Jadeビュー (開発中にこれを行います) や@import 'images.less';、より少ないファイルからのようなことを行うことができないため、ワークフローが中断されます。 .

Java Jsoup を使用して詳細を取得しています。

上記のセクションを使用して取得しました..

テキスト「Caldwell, Idaho, USA」を取得する方法はありますか? クラス名「octicon octicon-location」を使用しようとしています。これらの属性をすべて個別に取得する必要があるためです (利用可能な場合のみ)。

アイコン フォント (FontAwesome/Octicons など) を Shadow DOM に流し込むための推奨される方法はありますか?

現時点では、カスタム要素の Shadow DOM でアイコンを使用したい場合、ociticons.cssファイルの一部をインラインで Shadow DOMに含める必要があります。

(明らか@font-faceに、Shadow DOM にブリードします。)

GitHub Markdown API ( https://developer.github.com/v3/markdown/ ) をテストすると、単純な「# 見出し」を変換すると、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>

なぜこのように起こるのか、それを回避する方法を知っている人はいますか?

ありがとう。