0

主要なブラウザーでフォントを適切に表示するのに苦労しています (現時点では Windows バージョンのみを使用しており、Mac にはアクセスできません)。コードとその動作について言及しようと思います。私が SVG 行に加えた変更のたびに、同様の問題についていくつかの調査を行った後、ほとんどの人が変更を提案しているためです。

@font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),
     url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }

このコードにより、Google Chrome および Safari でフォントが非常にピクセル化されたように見えます。

ただし、FireFox と IE では問題なく表示されます。

これは2番目のコードです（SVG行を増やしました）：

@font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.svg#RobotoLight') format('svg');
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),         
font-weight: normal;
font-style: normal; }

FireFox、Chrome、および Safari では、フォントが表示されなくなり、既定の Web フォントに置き換えられます。

それでもIEでは正常に見えます。

最後に、SVG 行から「#RobotoLight」を削除すると、次のようになります。

@font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
     url('../font/jura-demibold.svg') format('svg');
     url('../font/jura-demibold.woff') format('woff'),
     url('../font/jura-demibold.ttf') format('truetype'),         
font-weight: normal;
font-style: normal; }

フォントはまだ FireFox では表示されませんが、Chrome、Safari、IE では (ピクセル化なしで) 正しく動作するようになりました!

ですから、3 番目のコードを FireFox で動作させるのを手伝ってくれる人がいますか?

ps: 私は経験豊富な開発者ではなく、まだこれに慣れていません。準備が整ったテンプレートを購入しました。テンプレートの一部を変更して、自分用の基本的な Web サイトを作成しようとしています。これが重要かどうかはわかりませんが、 CSS シートの font-family 名を変更せずに、適切なフォルダーにフォントを追加し、SRC URL を正しいパスに編集しました。

font-family の名前は、CSS シートで自分が参照するためのものであり、ブラウザは実際には確認していないと思います。

どんな助けでも大歓迎です！

4

2 に答える 2

3

コンマとセミコロンが混同されています。正しいブロックは次のようになります。

@font-face {
  font-family: 'RobotoLight';
  src: url('../font/jura-demibold.eot');
  src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
       url('../font/jura-demibold.svg') format('svg'),
       url('../font/jura-demibold.woff') format('woff'),
       url('../font/jura-demibold.ttf') format('truetype');       
  font-weight: normal;
  font-style: normal;
}
于 2013-10-29T15:29:41.117 に答える