CSSテキストの 'inner'行の高さを変更するには

私はentypoというアイコンフォントで作業しようとしています。フォントは素晴らしいですが、開発者が選択したパディングは恐ろしいものであり、このフォントを怒らせて動作させます。アイコンは本当に良いですし、私はそれを動作させるようにしようとしています。CSSテキストの 'inner'行の高さを変更するには

フォントを通常のように見えるようにするには、フォントサイズを大きくする必要があります（40px +など）。

アイコンを15pxの高さのスペースに収めようとしている場合、font-sizeは40pxになります。そして、余分なスペースがすべて必要です。

考えられるすべての組み合わせで明示的な高さ、明示的なラインハイト、垂直方向のアライメントを設定しようとしましたが、結果はPCとMacの違いです。

私が考えることができるのは、「残りのスペース」は、異なるオペレーティングシステムによって異なって処理されるということだけです。

私が気付いていないいくつかのCSSプロパティがありますか？

enter image description here

MAC

enter image description here

これは私が試してみて、私ができる最善のようにそれをゼロにするために使用される非常にハックCSSです。私はすでに高さとラインハイトで試してみたことを心に留めておいてください。それは常に同じ問題です.PCは常に、マックが置く場所の下にそれを置きます。君たちにデモする上で、それらの画像を期すため

.icon { 
    font-family: 'entypo'; 
    display: inline-block; 
    color: #000; 
    font-size: 40px; 
    line-height: 0; 
    height: 0; 
    vertical-align: middle; 
}

、これらは私が追加されたプロパティは、次のとおりです。 height: 20px; width: 20px; background: red;のみ、それはとても異なってレンダリングする方法を実証します。

出典

2012-11-02 Tallboy

あなたはアイコンやテキストの[フィドル]（http://www.jsfiddle.net）を投稿することができますか？セットアップ全体を見ることなく何かをするのは難しいです。 – fncombo

それは@ font-faceが含まれているので難しいですが、http：//entypo.comのデモページに行き、chrome inspector（macで）を使ってこれらの正確な値を設定すると、問題が表示されます。http ：//i.imgur.com/DmLts.png – Tallboy

そして、あなたのPCに行き、同じ特性を設定してください。それが不可能なのは、両方のオペレーティングシステムの赤いボックスの中に正確にフォントが入るようになっているからです。 – Tallboy

私は同じ問題を抱えています。私のソリューションはすばらしかったのかどうかはわかりませんが、いくつかのディスカッションを開始できるかどうかを確認するために投稿します。

.icon { 
    font-family: 'Entypo'; 
    position: absolute; 
    font-size: 40px; 
    height: 20px; 
    width: 20px; 
    margin-left: -20px; /* This will force it to live before the containing element, so the container may need 20px of padding-left */ 
    margin-top: -1px; /* Just because it was still sitting one pixel to low for my eye */ 
    text-align: center;

}

私は誰かが含む要素にパディングを追加することなく、これを実現する方法のアイデアを持っている期待しています。しかし、私がアイコンキャラクタの余分なパディングを「トリミング」できるようにしているような絶対配置でこの作業を行うことができる唯一の方法でした。

<script> 
$(document).ready(function(){ 
var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)?true:false; 
var isIOS = navigator.platform.match(/(iPhone|iPod|iPad)/i)?true:false; 

if(isMacLike || isIOS) 
    {  
     //alert("mac!!!"); 
     $(".entypoclass").css("margin-top","11px"); 
    } 
    else 
     { 
      // alert("pc!"); 
     } 
}); 
</script>

出典

2012-11-04 22:42:26 snorris

解決方法はfontelloを使うようです。残念ながら、私はすべてのアイコンをスプライトに変換した後にしか見つかりませんでした。（ – Tallboy

はい！fontelloは素晴らしいです：http://fontel.com/ –

-1

HTMLを見てうれしいでしょうが、おそらく埋め込みが助けになるとしたら、padding:3px;と言います。

出典

2012-11-02 01:51:49 Monica

バグはjQueryを使って固定されています。

幸いにも、Fontelloにいる人はそれを修正するのに少し時間を費やしました。できます。

出典

2013-11-27 19:03:02

Entypo'sデフォルトの行の高さが台無しにされています

だけのページでこれを追加）;

出典

2014-08-15 02:17:06

私のソリューションは、次のとおりです。

icon{ 
    line-height:0px; 
    overflow:hidden; 
    display:inline-block; 
    font-size:75px; 
    font-family:'entypo'; 
    text-align:center; 
    height:37px; 
    width:37px; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased 
}

出典

2015-01-17 16:47:16

CSSテキストの 'inner'行の高​​さを変更するには

答えて

関連する問題

CSSテキストの 'inner'行の高さを変更するには