-1

tumblr テーマで @font-face 構文を使用しています。私がインストールしたフォントは、次のコードを使用した Doctor Soos Bold と Doctor Soos Light です。

@font-face {
font-family: 'doctor_soos_boldbold';
src: url('doctor_soos_bold_2.1-webfont.eot');
src: url('doctor_soos_bold_2.1-webfont.eot?#iefix') format('embedded-opentype'),
     url('doctor_soos_bold_2.1-webfont.woff') format('woff'),
     url('doctor_soos_bold_2.1-webfont.ttf') format('truetype'),
     url('doctor_soos_bold_2.1-webfont.svg#doctor_soos_boldbold') format('svg');
font-weight: normal;
font-style: normal;}

@font-face {
font-family: 'doctor_soos_lightregular';
src: url('doctor_soos_light_1.1-webfont.eot');
src: url('doctor_soos_light_1.1-webfont.eot?#iefix') format('embedded-opentype'),
     url('doctor_soos_light_1.1-webfont.woff') format('woff'),
     url('doctor_soos_light_1.1-webfont.ttf') format('truetype'),
     url('doctor_soos_light_1.1-webfont.svg#doctor_soos_lightregular') format('svg');
font-weight: normal;
font-style: normal;}

問題は、これらのフォントを使用するたびに、結果のフォントが元のフォントと異なることです。違いはここで見ることができますhttp://celestetwit.tumblr.com/private/61000332979/tumblr_mszx4vL7iw1sdolt8

もちろん、コードはスタイル要素内に配置されます。しかし、私は CSS についてあまり詳しくなく、使用している既成のカスタム tumblr テーマが上記のコードに影響を与えているかどうかもわからないため、どの部分が間違っているのかわかりません。この問題を解決するのを手伝ってください。私が使用している tumblr のテーマ コードは、ここにありますhttp://pastebin.com/UqNL7X89参考までにご覧ください。

また、タンブラーにフォントをアップロードし、以下のコードを使用しましたが、それでも同じ結果が得られます。

@font-face {font-family: "doctorsoosbold"; src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf');}

@font-face {font-family: "doctorsooslight"; src: url('http://static.tumblr.com/qvrmxer/TpImsz0yf/doctor_soos_light_1.1.ttf');}

また、以下のコードでこれらの font-family を使用すると、結果も同じになります。

.entry h1{font-family: doctorsoosbold; text-transform: uppercase; font-size: 15px; font-weight: 20px; letter-spacing: 1px;}
4

1 に答える 1

0

あなたがそこに持っているものには2つの問題があります。

  1. フォント「doctor_soos_boldbold」と「doctor_soos_lightregular」を宣言しましたが、正しいパスを指定していません。少なくとも、現在のディレクトリにこれらのフォントがないと思います。フォントが適切に配置されている場所を指定する必要があります。

あなたが持っている場所：

@font-face {
    font-family: 'doctor_soos_boldbold';
    src: url('doctor_soos_bold_2.1-webfont.eot');
    src: url('doctor_soos_bold_2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('doctor_soos_bold_2.1-webfont.woff') format('woff'),
         url('doctor_soos_bold_2.1-webfont.ttf') format('truetype'),
         url('doctor_soos_bold_2.1-webfont.svg#doctor_soos_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

「url(」で始まるすべてのスポットには、それらのフォントへの正しい URL が必要です。すべてのフォント。したがって、作成する必要があります。

@font-face {
    font-family: 'doctor_soos_boldbold';
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot');
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot?#iefix') format('embedded-opentype'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.woff') format('woff'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf') format('truetype'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.svg#doctor_soos_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

これらのファイル名を使用して、.eot ファイル、.woff、.ttf、および .svg がすべて存在する必要があります。4 つのファイルすべてについても、ライト フォントで同じことを行います。

Firefox では、要求している CSS と同じサーバー上にフォントが必要であることに注意してください。それが同じサブドメインにも当てはまるかどうかはわかりません。つまり、http://celestetwit にある必要がある場合、Firefox では機能しない可能性があります。 tumblr.com

  1. また、これらのフォントをページ上の要素に適用していません。

これを行うには、要素を選択する必要があります。たとえば、私は選択します...

.entry { font-family: calibri; }

.. font-family を次のように変更します。

.entry { font-family: 'doctor_soos_lightregular', Arial, Helvetica, sans-serif; }

.. 更新されたフォントを表示できます (上記のようにフォールバックを使用することをお勧めします。Windows XP/IE 8 のエラーを修正して、選択を行います。)

于 2013-09-12T07:25:54.203 に答える