web-dev-qa-db-ja.com

フォントに埋め込まれたパディング/マージン

すべてのフォントには、何らかの埋め込みパディングまたはマージンがあるようです。設定することにより：

margin: 0px;
padding: 0px;

あなたはあなたが望むものを決して手に入れません。なぜこれなのか誰か知っていますか？

htmlcssfontsmarginpadding
16
Robin Cox

あなたが抱えている問題はCSSではなくフォント自体にあるようです。ほとんどのフォントは、すぐに使用できるベースライン、x-height、line-heightを定義します。特定の問題は、フォントの leading 、行間のスペースにある可能性があります。これらの値は、非常に一貫性がない場合があります。特定のフォントを正しく整列させようとしている場合は、 FontLab を確認し、使用している特定のフォントのグリフ/ベースライン/行の高さを編集することをお勧めします。

また、フォントのWebセーフバージョンを確認することもできます。これらのタイプのフォントは通常は、Web上で最適にレンダリングされるように特別に間隔が空けられています。これは常に当てはまるわけではありませんが、探している結果が得られる可能性があります。 Googleのウェブフォントのライブラリをチェックしてください ここ 。

更新

この回答は十分な注目を集めているので、以下の最初のコメントを回答に追加して説明することにしました。

ブラウザのリセット：すべてのブラウザは、aやstrongなどの予約済みHTMLタグの多くにデフォルトの状態を設定します。フォント、行の高さ、太さ、サイズなど、デフォルトで定義されているものは他にもあります。これは、フォントのレンダリングに影響を与える可能性があります。通常、これは特定のブラウザにローカライズされています。したがって、CSSリセットを使用することで、ブラウザーのデフォルトのレンダリングの問題を排除できます。 Eric Meyers Reset は良いリセットですが、 間違いなく他のもの があります。さまざまなものを使用して、どれが最適かを確認してください。

ただし、CSSリセットは、すべてのブラウザーを対象とし、それらをすべて同じに設定することで機能します。一部の人々は、代わりに、各ブラウザの問題のみを対象とするものを使用することを好みます。つまり 正規化 より良いでしょう。

CSSのリセットで修正されない問題もあります。フォントエイリアシングなど（フォントをギザギザではなく滑らかに見せます）。一部のブラウザとオペレーティングシステムはフォントにアンチエイリアスを追加しないため、グリフ幅の違いも表示されます。残念ながら、これはほとんどの場合避けられません。 Cufon や Sifr のようなフラッシュフォント置換ツールを使用するルートをたどる人もいます。これにも独自の問題のリストがあります（ [〜＃〜] fouc [〜＃〜] など）。

別の更新

まだ残っているもう1つの問題は、カーニング、つまりグリフ間のスペースの問題です。 CSSプロパティがあります letter-spacing これにより、テキストのブロックに対してグローバルカーニングを実行できますが、PhotoshopやInDesignなどの個々のグリフをターゲットにする機能がありません。カーニングも全ピクセルに基づいているため、達成できることによって制限されます。また、IEの問題があり、期待するほど信頼性がありません。 kerningjs というJavaScriptがありますが、これもかなりまともですが、それも全体です-ピクセルベースであるため、ラスタライズされたテキストほど正確ではありません。

全体として、Web上のフォントは過去数年間で改善されています。残念ながら、フォントが印刷またはラスタライズのみを目的としていた過去の問題に対処しています。しかし、私たちフォント愛好家には、近い将来に希望があります。 @allcapsが言ったように、 lineboxのCSS3仕様 が出ているので、広く受け入れられるのは時間の問題です！

23
Matthew R.

コンピュータフォントのこの特異性の理由は、ほとんど歴史的です。以前は、フォントはそれぞれに1文字の小さな金属ブロックのセットであり、これらのブロックの高さは、子孫、子孫、発音区別符号など、文字のすべての要素を含むのに十分でなければなりませんでした。活版印刷の伝統では、フォントサイズをそのような金属ブロックの高さとして定義しています。そのため、ほとんどすべての実際の文字は通常、テキストに設定されているフォントサイズよりも視覚的にはるかに小さく、上下に空白があります。

主な活版印刷の測定の歴史的ルーツを説明する良い記事があります： http://www.dev-archive.net/articles/typograph1-en.html#Ch22

6
Ilya Streltsyn

x ovgjqpybdfhkltCAPSÂÊÁËÈ

グリフは2次元のキャンバス上にデザインされています。ラテン文字システムの場合、このキャンバスの高さは一定であり、幅は異なる場合があります。グリフはベースラインに配置されます。 xはベースライン上にあり、xの上部がxの高さを定義します。丸くて先のとがった形状は小さく見えるので、光学的に補正されます。子孫はベースラインを下回ります。アセンダー、大文字はエックスハイトを超えます。ブラウザは、ベースラインごとにテキストを（同じ段落内の）異なるフォントに揃えます。

では、なぜ組み込みマージンがあるのですか？グリフは、互いに整列するために周囲に空白が必要です。

これらのマージンに影響を与えるために何ができるでしょうか？

  1. フォントを賢く選択してください。
  2. 行の高さを指定しますp { line-height:0.5EM;}。
  3. ベースラインシフト.shift { top:-.5em; position:relative; }
  4. そして、 CSS3モジュール：行 を待ちます。

一般的なアドバイス：自分が何をしているのか完全に確信が持てない限り、自分でフォントを調整しないでください。あなたが遭遇する多くのことの1つはほのめかしです。 Windowsにはヒント付きフォントが必要であり、ヒントを正しく取得するのは困難です。また、フォントのロード方法（@ font-face）は、ローカルコピーが存在する場合はそれをロードします。ハックによってローカルフォントを無効にすることができます。あなたのマイレージは異なる場合があります。

4
allcaps

フォントの上部と下部にある「パディング」は、基本的に発音区別符号用に予約されたスペースです（ https://en.wikipedia.org/wiki/Diacritic ）。一部のスクリプトは、大文字を含む一部の文字に複数の発音区別符号を積み重ねます（たとえば、ベトナム語 https://en.wikipedia.org/wiki/Vietnamese_alphabet ）ので、それらのために場所を予約するのを忘れたフォントデザイナーが勝ちました後で彼のフォントを拡張することはできません。また、水平スクリプトを読みやすくするには、行をある程度分離（​​先頭）する必要があります。

ボックス描画要素のような非常に特殊なグリフのみがグリフボックスの限界まで拡張されます http://www.unicode.org/charts/PDF/U2500.pdf これが「パディング」が構築される理由でもあります-各グリフで。外部プロパティの場合、結合することを目的としたグリフと、ある程度の分離が必要なグリフを区別することはできません（つまり、パディングの量は、フォント全体のプロパティではなく、グリフのプロパティです）。

次の例では、適切なUnicodeカバレッジを備えた優れたフォントが必要です（ http://dejavu-fonts.org/ Works）

共同ボックス描画要素
↓
┃ÇŖŞ
┃ẤỄǛȰ┃U←ボックスの描画に合わせて「パディング」を含める必要があります
↑
複数の発音区別符号を含むラテン語の首都（本当に混雑している）

最後に、フォントは非常に古い技術（活字）に由来し、フォントを説明するために使用される規則は、依然として15世紀の習慣を参照しているため、素人にはまったくわかりません。

（コンピューターのフォント形式によって追加される複雑さについては、 http://www.webfonts.info/node/3 も参照してください）

フォントopentypeテキストレンダリング

3
nim

フォントでは行の高さと文字間隔のパディング/マージンを使用できます...それ以外の場合は、見出しごとにカスタムcssを使用します........

/*use line-height*/
.font{
line-height: 1px; 
letter-spacing: 1px;
}

またはカスタムcssを使用......

  h1{margin:1px 0;}
    h2{margin:1px 0;}
    h3{margin:1px 0;}
    h4{margin:1px 0;}

使用する前にこれらのcssを使用してリセットcss .......

3
webslatesoftware

段落内の行の間にスペースを使用する場合は、次を使用できます。

line-height: 3px; /*3px is an example*/

または、文字の間にスペースを使用する場合は、次を使用できます。

letter-spacing: -2px;

ハグ、ヴィン。

2
Vinicius Lima

これが私の意見です

  • マージンは、各辺から隣接する要素までの距離であり、marginプロパティは、要素の上部、左側、右側、および下部に設定できます。
  • パディングは、HTML要素の境界線とその中のコンテンツの間の距離です。

しかし、あなたの場合、あなたは本当にこれらの両方を必要としません、あなたはフォント間隔に興味があるので、letter-spacingと呼ばれる1つのcssプロパティがあります

  • 文字間隔プロパティは、テキスト内の文字間のスペースを増減します

試してみてください

 h2 {letter-spacing:-3px}

文字間隔プロパティは、すべての主要なブラウザでサポートされています。

注：値 "inherit"は、IE7以前ではサポートされていません。 IE8には！DOCTYPEが必要です。 IE9は「継承」をサポートしています。

1
Microtechie

フォント自体には問題はありません。はい、@ matthewが言ったように、フォントデザイン自体にはいくつかの文字が組み込まれています。たとえば、「Segoe」ファミリと「Verdana」ファミリの違いを確認してください。両方を使用する必要がある場合は、cssをリセットし続けます。 1つのスタイルは機能しません。

問題の大部分は、同じOS上でも異なるブラウザーがレンダリングする方法にあります。ちなみに、IEのレンダリングは異なります。ClearType、アンチエイリアシング、フォントスムージング、GPUレンダリングの代わりにソフトウェアレンダリング、レンダリングエンジン自体など、すべてが確実に役割を果たします。すべてのOSのすべてのブラウザでピクセルパーフェクトなデザインになるわけではありません。

ClearTypeはピクセルグリッドとの位置合わせを試み、高さの微妙な違いに関する別の問題を引き起こします。

このリンクは非常に古いですが、それでも非常に関連性があります： http://www.joelonsoftware.com/items/2007/06/12.html

関連項目： http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html

関連項目： https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers

関連項目： ブラウザ間のCSSフォントの違い

あなたの最善の策は、あなたが十分に近づくまでcssをいじり続けることです。

1
Abhitalks

マージンとパディング値をすべてゼロにリセットするのはどうですか

*{
  margin: 0;
  padding: 0;
}
0
Bhojendra Rauniyar

私はあなたが説明しようとしていることをカーニングしていると思います

このライブラリを見てください

http://kerningjs.com/

CSS、カーニングに会います。カーニング、CSSに会いましょう。実際のCSSルールを使用して、Webタイプを自動的にカーン、スタイル設定、変換、およびスケーリングします。

印刷デザイナーは、あまりにも長い間それを簡単にしてきました。これは2012年です。ウェブは20年以上前から存在していますが、ウェブデザイナーはタイポグラフィを完全に制御できていませんか？それを忘れて、Kerning.jsを使用してください！

それは無料です

0
San Bluecat

テキスト要素のネイティブマージンは次のとおりです（少なくともFirefoxとChromeでは）。

実例

 p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}

それらを削除するには、次のようにマージンを再設定する必要があります。

p, h1, h2, h3, h4, h5, h6{margin:0;}
0
apaul

Htmlドキュメントのhtmlソースを調べたところ、すべてのブラウザで通常のマージン/パディングが追加された後、chromeは、デフォルトで独自のWebkitのマージン/パディングプロパティが追加されていることがわかりました。

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

解決策は通常ではありません

*{
margin:0;
padding:0;
}

スタイルを追加する

*{
margin:0;
padding:0;
-webkit-margin-before:0;    
-webkit-margin-after:0;
}

-webkit-margin-startと-webkit-margin-endはすでに0pxに設定されているため、ここで設定しても意味がありません。

それがうまくいくかどうか教えてください！ :)

0
Dangling Cruze

私はよく同じ問題に遭遇します。特に、画像など、テキストではないテキスト以外のテキストをその横に配置しようとすると、同じ問題が発生します。

これが私が成功したテクニックです。テキストの一部を選択して、背後に色付きの背景が表示されるようにします。選択範囲のハイライトの上部には、フォントが文字の「上部」と「下部」と見なすものが表示されます。さまざまなサイズで複数のブラウザでフォントのスクリーンショットを撮ります。 Photoshopでスクリーンキャプチャを拡大し、「あるべき」と思われるピクセル数と実際のトップピクセル数を数えます。選択の高さ全体の中でピクセル数が表すパーセンテージを計算します。

次に、「オーバーフロー」のパーセンテージに等しい負の上部マージンをemsのテキストに設定します。したがって、テキストの高さが10ピクセルで、実際の高さが12ピクセルの場合は、上マージンを-0.2emの負の値にします。

次に、問題の原因となっているフォントファミリを割り当てる場合は常に、この負の上部マージンも含めます。底面と側面のオーバーフローにも同じ手法を使用できますが、通常、最大の頭痛の種となるのは上面です。

0
cantera

アイコンにいくつかのWebフォントを使用しているときに、この問題に何度か遭遇し、絶対位置のコンテナーに配置することで、より適切に制御できるようになりました。

[〜＃〜] html [〜＃〜]

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

[〜＃〜] css [〜＃〜]

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

これは、正/負のマージンとパディングを使用するよりも、ブラウザー間で物事を制御するためのより良い方法のように感じました。

テキストブロックにコンテナとクラスを与えることで、ブラウザ間の位置を微調整するためのよりクリーンな機能が得られます。 （IMO）。

そこに何かがあるかもしれません。

乾杯、

ロブ

0
Rob Sedgwick

フォント自体に問題があるようです。上記のようにCSSを使用して問題を解決することもできますが、シナリオではフォントファイル自体を修正する方がよいと言えます。

フォントの編集方法についてのより良い洞察が得られるので、このページをチェックしてください： http://mashable.com/2011/11/17/free-font-creation-tools/

0
Debarko