7

何らかの理由で、私の Mac OS X 版 Firefox 12.0 では、⟩ ( ⟩) 文字が本来よりもはるかに大きくなっています。Chrome と Safari では、私が望んでいたとおりに表示されます。

私はAddDefaultCharset utf-8my.htaccessだけでなく<meta charset="utf-8">myにも持っています<head>(これらのファイルを配信しているグループは my を使用しない可能性があるため.htaccess)。

また、Adobe の Browser Lab によると、IE 7 と 8 は四角いボックスを表示するだけです...これらのブラウザでその文字をサポートできる人はいますか? それは物事をはるかに簡単にします（色が変化するため、画像は非常に不便であり、画像で色あせはありません）.

デモ: http://cameronspear.com/demos/rang/

これは私がChromeで見ているものであり、期待しているものです:

クロム

これは私のFirefoxが示しているものです：

ファイアフォックス

これは、IE8 の Browser Labs のスクリーンショットです。

IE8

TL;DR:&rang;これらのスクリーンショットはすべて、⟩ 別名キャラクターを使用した最初のスクリーンショットのように見せたい. JavaScript の使用も許容されます。

ありがとう。

&rang;[編集] CSS を使用して色を変更し、複数のブラウザーで同じように見えるようにすることができるため、キャラクターを持っていることはそれほど重要ではないことを明記する必要があります。

解決

後世のために何をしたかを正確に共有したかっただけです。

Pointy のヒントとリソースのおかげで、 「独自のアイコン Web フォントの作成方法」で説明されているテンプレートとメソッドを使用して、Inkscapeで独自のSVGを作成しました。大きな山かっこをに、小さな山かっこを にマッピングしました。Xx

私が遭遇した 1 つのことは、私の角度がベースラインに触れ、「インライン」に収まるようにボックスの上部まで約 72% しか行かない必要があるということでした。そのため、大文字の X は元の高すぎるもので、小文字の x はよりインラインのもの。

次に、http://www.freefontconverter.com/ で SVG をTTFに変換し、 http : //www.fontsquirrel.com/fontface/generator で Web フォントに変換しました。

...そしてそれだけでした。

デモ ( http://cameronspear.com/demos/rang/ ) はまだ稼働中です。すべてのブラウザーで一貫して表示され、onclick の回転アニメーションがポイントの近くにぶら下がっていることがわかります。

[更新] Web 用のフォントの作成とフォントの整理に役立つIcoMoonという優れたリソースを見つけました。通常の svg ベクターを受け入れるので、Illustrator で作成でき、IcoMoon がキーボード マッピングなどを処理するため、Inkscape を台無しにする必要はありません。使用するアイコンのみをエクスポートできるため、フォント全体ではなく、それが必要な場合は 3 つまたは 4 つのアイコンのみをロードします。

これはかけがえのないリソースになっているので、Icon Fonts を始めたいと考えているすべての人に、チェックすることをお勧めします。CSS-Trick の 113 回目の Screencast で、プロセス全体について詳しく知ることができます。

4

3 に答える 3

6

画像を使用できますか？それらは、すべてのブラウザーで一貫した外観を提供します。多くの場合、文字記号よりも画像の方が適しています。

于 2012-06-04T18:18:05.070 に答える
2

これはフォントの問題です。まれな文字（ほとんどのフォントには存在しない文字）が適切にレンダリングされる可能性を最大化するには、それをすべて含むフォントの最大リストを指定します。

これで、ブラケットを含む要素がページにfont-family: Arial,sans-serif設定されました。spanArialにはそれが含まれていないため、各ブラウザは独自の定義を使用しますsans-serif。マップ先のマップに角かっこが含まれていない場合、巧妙なブラウザは、システム内の他のフォントをスキャンするなど、巧妙な方法を試しますが、それでもグリフが不足する可能性があります。

追加の問題があります。&rang;通常、文字自体の代わりにエンティティ参照を使用することは重要ではありませんが、ここでは使用します。HTML 4.01と は、 &rang;U+232Aを意味します。HTML5ドラフトでは、U+27E9を意味します。IEはここではHTML4.01に従いますが、FirefoxはHTML5定義を使用します。したがって、UTF-8エンコーディングで、または文字参照として、本当に必要な文字を使用することをお勧めします&#x232a;。

たとえば、U + 232Aのフォントカバレッジを確認し、優先順にフォントを書き込むことができる場合。ただし、すべてのフォントが許容できる表現を提供することを確認する必要があります。たとえば、Cambria Mathを使用する場合、デフォルトの行の高さは非常に大きくなるため、line-height1.3などの適切な値に明示的に設定することをお勧めします。

最後に、これはおそらく最初に尋ねられるべきでしたが、本当に直角ブラケットを使用したいですか、それとも数学的な直角ブラケットを使用したいですか？これらは角かっこであり、矢印記号ではなく、左山かっことペアとして使用されます。

さらに詳しい情報：HTMLで特殊文字を使用するためのガイド。

于 2012-06-04T19:58:33.537 に答える
2

アイコン フォントを作成するのは、私ができるほど簡単ですが、(私にとっては) そのプロセスはやや不可解です。実際のグラフィック アーティストの方が上手で、技術的な詳細を私よりも理解している人はたくさんいると思います。

これは、このトピックに関するかなり完全なブログ投稿です。(多くのブログではありません。) よく説明されていない主な点は、Inkscape の「アート ボード」領域と、フォント内の各グリフの垂直方向の配置との関係です。それはいくつかの詳細に入りますが、私はそれを理解することができませんでした.

したがって、私が行ったことは、一辺が 1024 ピクセルの正方形のアートボードを作成することだけです。次に、アート ボードが 16x16 のグリッドに分割されるように、Inkscape でグリッドを設定します。これにより、16px のフォント サイズで適切にレンダリングされる文字のデザインが (やや) 簡単になります。(もちろん、必要に応じて別のフォント サイズをターゲットにすることもできます。ただし、かなり小さくする必要があるものには 16x16 が適しています。) 次に、グリフをページに配置するときに、それらがパディングなしで 1em x 1em ボックス (または 16px x 16px; ただし、CSS で実行したい)。私は<i>タグを使用し、それらにdisplay: inline-block. それは私に多くの柔軟性を与え、それは一般的にうまく機能します.

Inkscape の SVG フォント ツールは、控えめに言ってもかなり未加工です。それは文字通り誰かの夏のプロジェクトの結果です。それは機能しますが、かろうじてそれ以上ではありません。 頻繁に保​​存します。

ここで、フォント ファイルを生成するプロセスはややクレイジーです。FontSquirrelを使用しています。Inkscape から保存した .svg をアップロードし、EOT、WOFF、および TTF を要求します。驚くべきことに、それは機能します。

いくつかのグリフだけが必要な場合、これは非常に便利な方法です。ダウンロードする小さなフォント ファイルがあり、ブラウザによってキャッシュされるからです。ただし、いくつかのアクセシビリティの問題があり、この慣行は十分に物議を醸しているため、コミュニティの一部の熱狂的なメンバーは、これを行うことであなたを野蛮人と見なす可能性があります:-)

于 2012-06-04T18:40:47.867 に答える