2

解決しなければならない奇妙な問題がいくつかあります。

まず、CSS ファイル内の @font-face 宣言を示します。

@font-face {
font-family: "Conv_Gotham-Book";
src: url("fonts/Gotham-Book.eot");
src: local("☺"), 
    url("fonts/Gotham-Book.woff") format("woff"), 
    url("fonts/Gotham-Book.ttf") format("truetype"), 
    url("fonts/Gotham-Book.svg#Gotham-Book") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Light";
src: url("fonts/Gotham-Light.eot");
src: local("☺"),
    url("fonts/Gotham-Light.woff") format("woff"), 
    url("fonts/Gotham-Light.ttf") format("truetype"), 
    url("fonts/Gotham-Light.svg#Gotham-Light") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Medium";
src: url("fonts/Gotham-Medium.eot");
src: local("☺"), 
    url("fonts/Gotham-Medium.woff") format("woff"), 
    url("fonts/Gotham-Medium.ttf") format("truetype"), 
    url("fonts/Gotham-Medium.svg#Gotham-Medium") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Bold";
src: url("fonts/Gotham-Bold.eot") format("eot");
src: local("☺"),
    url("fonts/Gotham-Bold.woff") format("woff"), 
    url("fonts/Gotham-Bold.ttf") format("truetype"), 
    url("fonts/Gotham-Bold.svg#GothamBold") format("svg");
font-weight: normal;
font-style: normal;
}

問題: これらのカスタム フォントを使用したハイパーリンクは、1 つのブラウザー/プラットフォームの組み合わせ Firefox 13.0.1/Mac でのみ機能しません (例: http://lonely-dev.com/leapfrogbeta/?page_id=896の見出し、 )

問題 2: iPad2/Safari ブラウザでフォントが消える。

他のすべては問題ありません。いくつかの洞察が欲しいです。

4

1 に答える 1

2

上記のコード例でGothamファミリー（現時点ではWebライセンスがありません）を呼び出している間、 css.custom .headline_area h2 aで「Journal」というフォントを使用することを宣言しました。custom.cssジャーナルはFirefox/MacとiPad/Safariの両方で正しくロードされます。リンクは両方で機能します。

更新：上記のすべての場合でフォントは正常に読み込まれますが、リンクが機能していません。これはa、インライン要素であるためです。また、見出しの高さを宣言することaは悪い考えです。次のルールを使用してください。

.custom .headline_area h2 a {
  display: block;
}

リンクは機能します。

もう1つは、含まれているリンクだけでなく、h1、h2などで見出しフォントを宣言する必要があるということです。

于 2012-06-20T18:15:08.380 に答える