6

entypoというアイコンフォントを使用しようとしています。フォントは素晴らしいですが、開発者が選択したパディングはひどいものであり、このフォントを操作するのに腹立たしいものになります。アイコンは本当に良いですが、私はそれを機能させようとしています。

フォントを「通常」に見せるために要約すると、フォントサイズは大きくする必要があります（40px以上など）。

アイコンを15pxの高さのスペースに収めようとしている場合、フォントサイズは40pxになり、処理する必要のある余分なスペースがすべてあります。

考えられるすべての組み合わせで、明示的な高さ、明示的なlineheight、vertical-alignを設定しようとしましたが、結果はPCとMacで異なります。

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

これを修正することに気付いていないCSSプロパティはありますか？

PC

ここに画像の説明を入力してください

マック

ここに画像の説明を入力してください

これは、私ができる限りそれをゼロにするために使用した非常にハックなCSSです。私はすでに高さとラインの高さで遊んでみたことを覚えておいてください、それは常に同じ問題です、PCは常にそれをMacが置く場所よりずっと下に置きます。

.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;。これは、レンダリングがどのように異なるかを示すためだけのものです。

4

5 に答える 5

1

私は同じ問題を抱えています。私の解決策がそれほど素晴らしいかどうかはわかりませんが、議論を始めることができるかどうかを確認するために投稿します。

.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;

}

誰かが、包含要素にパディングを追加することなくこれを達成する方法についてのアイデアを持っていることを願っています。ただし、アイコン文字の余分なパディングを「トリミング」できるように見える絶対位置でこの作業を行うことができる唯一の方法でした。

于 2012-11-04T22:42:26.737 に答える
1

バグはjqueryで修正されています;）

これをページに追加するだけです：

<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>
于 2013-11-27T19:03:02.317 に答える
1

Entypoのデフォルトの行の高さが台無しになっています。

幸いなことに、Fontelloの誰かがそれを修正するのにしばらく時間を費やしました。できます。

于 2014-08-15T02:17:06.710 に答える
0

私の解決策は次のとおりです。

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-17T16:47:16.400 に答える
-1

HTMLを見るのはいいことですが、おそらくパディングが役立つでしょうpadding:3px;。

于 2012-11-02T01:51:49.537 に答える