2016-08-25 4 views
0

自分のサイトをサーバにロードしたばかりで、スタイルはデベロッパーツールのユニコード文字とタブレットのオンラインに適用されますが、携帯電話(chrome)から見るとサイズ属性は適用されません。クロムモバイルにはUnicode文字のfont-sizeが適用されません。どうして?

ライブの例については、http://www.perth-soakwells.netを参照してください。参考のため、ロゴのeは7emです。

なぜ誰かが知っていますか代替方法がありますか?私はロゴの一部としてサークルを使用しています。上記のリンクを参照してください。

以下のコード。

.logo_circle{ 
 
font-size: 9em; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
color: white; 
 
font-family: "Arial", "Lucida Sans Regular", "DejaVu Serif", "Verdana", "Unifont", "Trebuchet MS";} 
 

 
body{background-color:black;}
<div class="logo_circle">&#9679;</div>

+0

あなたのURLが機能していません –

+0

が修正されました。申し訳ありません。 – JPB

+0

404エラー –

答えて

1

sizeプロパティは、確かに私のために適用されます。しかし、ロゴは私のWindowsデスクトップと同じように私のモバイルブラウザでは見えず、私のLinuxデスクトップではもう違って見えます。

これは、選択したフォント(最初の選択としてArial)がすべての場所で使用できないためです。そのフォントを持たないプラットフォームでは、何か違うものが得られます。文字U + 25CF黒丸の正確な形と半径はフォントによって異なります。

文字にWebフォントを埋め込むか、一貫したレンダリングを試みるか、テキストに頼るのではなく固定パスを含むSVGイメージとしてロゴを作成することができます。

+0

チップをありがとう、私はそれが別のデバイス上のフォントの異なる解釈と関係していたと考えていた。ロゴがSVGでない理由はSEOのためです。だから、それはカウラーが読むことができますが、私はSVGにそのサークルを代わりに作ると思います。 – JPB

0
**YOU can do like this** 

<!DOCTYPE html> 
<html> 
<head> 

</script> 
<style> 
.logo_circle{ 
font-size: 9em; 
position: absolute; 
top: 0; 
left: 0; 
color: white; 
font-family: "Arial", "Lucida Sans Regular", "DejaVu Serif", "Verdana", "Unifont", "Trebuchet MS";} 
.logo{ 
transform: rotate(340deg); 
    font-size: 3em; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 63px 22px; 
    color: #533E9D; 
    font-weight: 600; 
} 
body{background-color:black;} 
</style> 
</head> 
<body> 
<div class="logo_circle">&#9679;</div> 
<div class="logo">N</div> 
</body> 
</html> 
+0

申し訳ありません変更が表示されません。 – JPB

+0

デザインに合わせてマージンを調整してください。私のマージンはあなたの画面では見えません。 –

関連する問題