フォントとdivの位置（ワードプレス）

Question

www.oihanevalbuenaredondo.be

私は私の窓の上に、font-family: adobe arabicとCSSの私のポストのタイトルのフォントを作った、タイトルはそれがあるべき正確にどのように示していしかし、私がMacで自分のブログにアクセスしたとき、タイトルはちょうど退屈な基本的なフォントであり、それは 'Adobe arabic'にはない。なぜSafariはAdobe Arabicでタイトルを表示できないのですか？私は別の質問を持っている、

.entry-title { 
font-family: adobe arabic; 
text-align: center; 
letter-spacing: 1px; 
color: #7f7f7f; 
font-size: 28px; 
position: relative; 
margin: 0 0 10px 0; 
padding: 0 60px; 
} 

.entry-title a:hover { 
color: #d9d9d9; 
} 

そして：

これは、ドキュメントはstyle.cssです。あなたがウィンドウ上にいる場合、それは表示されませんが、私のページの上部にある言語オプションは、私のウィンドウ上に完全に配置されていますが、Macでは、境界の位置とドロップダウンは、彼らはもっと左にあります。

これはボーダーのため、私が持っているCSSです：

.topbar { 
position: absolute; 
right: 170px; 
top:-8px; 
font-size: 11pt; 
color: #E1BDC3; 
border: 1px dotted #999999; 
border-radius:8px; 
width: 255px; 
height: 48px; 
padding-top: 11px; 
padding-left: 10px; 
z-index: 1000;} 

これは私がドロップダウンのために持っているものです：

.widget_polylang { 
position: absolute; 
top: -330px; 
width: 150px; 
right: 20px; 
z-index: 10001;} 

このコードは、ウィジェットを配置することです。ドロップダウンはウィジェットで私のブログにのみ追加できるので。そこで私はウィジェットを配置しました。

多分私はCSSで何か間違ったことをしていますが、私はHTMLの初心者ですが、これはウィンドウ上でうまく動作しましたが、明らかに これはMacで正しくありません。

Answer 1

ほとんどの理由は、あなたのMacにこれらのフォントがインストールされていない可能性が高いためです。 Webページの場合は、@font-faceルールを使用してフォントを定義する必要があります。 @font-faceを使用すると、フォントをWebページと共に提供するか、または提供されたURLを使用してブラウザが使用できます。

Answer 2

まず、新しいフォントをCSS経由でプロジェクトに追加する必要があります。私は彼が私の意見では最適なソリューションですフォーマットを.woff使用することをお勧めとしてハビエル・カディスの答えを読むことをお勧め

How to add some non-standard font to a website?

： ここでは、これを適切に行うにはどのようなアイデアを持っています。

Answer 3

まず、世界が知るようにフォントを埋め込む必要があります。

あなたは@font-faceを実装するいずれかの方法でこれを行うことができます。

@font-face { 
    font-family: myFont; 
    src: url(path/to/your/font.ttf); 
    font-weight: bold; 
} 
p{font-family: myFont} 

それとも、CSS3でのインポート方法を使用することができます。

@import url('https://fonts.googleapis.com/css?family=Barrio'); 
 
p{ 
 
    font-family: 'Barrio', cursive; 
 
}

<p>hello</p>

あなたが見ることができるように、我々は今、誰もがそれをインストールしていないにも関わらず、当社のカスタムフォントを見ることができます。

---

OSXとWINの間のテキストのわずかなミスアライメントについて話している他の問題は、おそらく2つのオペレーティングシステム間のフォントレンダリングエンジンの違いに関係しています。あなたはそれについて hereを読むことができます..あなたは本当に残念なことにそれについて行うことはできません。

レンダリングエンジンは、異なるオペレーティングシステムが解釈してフォントを表示する方法の背後にあるメカニズムです。したがって、両方のフォントが正しく読み込まれると、小さな間隔とサイズの不一致が見つかります。