同じフォントに対して複数のフォント ファイルを追加するにはどうすればよいですか?
https://stackoverflow.com/questions/2436749
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私はそれを見ています @font-face CSS ルールの MDC ページ, しかし、一つだけ腑に落ちないことがあります。個別のファイルがあります 大胆な, イタリック そして 太字+斜体. 。3 つのファイルすべてを 1 つに埋め込むにはどうすればよいですか @font-face ルール？たとえば、次のものがあるとします。
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
ブラウザは太字にどのフォントを使用するかを認識しないため (ファイルが DejaVuSansBold.ttf であるため)、おそらく私が望まないフォントがデフォルトで使用されます。特定のフォントのさまざまなバリエーションをすべてブラウザに伝えるにはどうすればよいですか?
解決
解決策は複数追加することのようです @font-face ルール、たとえば:
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans.ttf");
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Oblique.ttf");
font-style: italic, oblique;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
ちなみに、Google Chrome はこのことを知らないようです。 format("ttf") 議論なので、それをスキップした方がよいかもしれません。
(この答えは、 CSS 2 仕様。 CSS3 カンマ区切りのリストではなく、1 つのフォント スタイルのみを許可します。)
他のヒント
CSS3 以降、仕様が変更され、単一の機能のみが許可されるようになりました。 font-style. 。カンマ区切りリスト (CSS2 ごと) は、次のように扱われます。 normal 以前の (デフォルト) エントリをオーバーライドします。これにより、この方法で定義されたフォントが永続的に斜体で表示されます。
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans.ttf");
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Oblique.ttf");
font-style: italic;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Oblique.ttf");
font-style: oblique;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: oblique;
}
ほとんどの場合、斜体で十分であり、使用する方を慎重に定義し、それを遵守すれば、斜めの規則は必要ありません。
Google フォントを使用している場合は、次のことをお勧めします。
フォントをローカルホストまたはサーバーから実行したい場合は、ファイルをダウンロードする必要があります。
ダウンロード リンクで ttf パッケージをダウンロードする代わりに、提供されるライブ リンクを使用します。たとえば、次のようになります。
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic
URL をブラウザに貼り付けると、最初の回答と同様のフォントフェイス宣言が表示されるはずです。
提供された URL を開いて、ファイルをダウンロードして名前を変更します。
更新されたフォントフェイス宣言を CSS 内の woff ファイルへの相対パスで貼り付ければ完了です。
フォントバリエーションを正しく機能させるには、CSS の @font-face の順序を逆にする必要がありました。
@font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
@font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Oblique.ttf");
font-style: italic, oblique;
}
@font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono.ttf");
}
今日、2017 年 12 月 17 日。Font-property-order の必要性に関する記述は見つかりません。 スペック。そして、Chromeでテストすると、順序に関係なく常に機能します。
@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
src: url('#{$fa-font-path}/fa-solid-900.eot');
src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
src: url('#{$fa-font-path}/fa-regular-400.eot');
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
font-family: 'DejaVu Sans';
src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
src:
local('DejaVu Sans'),
local('DejaVu-Sans'), /* Duplicated name with hyphen */
url('dejavu/DejaVuSans.ttf')
format('truetype');
}
/*bold version*/
@font-face {
font-family: 'DejaVu Sans';
src: url('dejavu/DejaVuSans-Bold.ttf');
src:
local('DejaVu Sans'),
local('DejaVu-Sans'),
url('dejavu/DejaVuSans-Bold.ttf')
format('truetype');
font-weight: bold;
}
/*italic version*/
@font-face {
font-family: 'DejaVu Sans';
src: url('dejavu/DejaVuSans-Oblique.ttf');
src:
local('DejaVu Sans'),
local('DejaVu-Sans'),
url('dejavu/DejaVuSans-Oblique.ttf')
format('truetype');
font-style: italic;
}
/*bold italic version*/
@font-face {
font-family: 'DejaVu Sans';
src: url('dejavu/DejaVuSans-BoldOblique.ttf');
src:
local('DejaVu Sans'),
local('DejaVu-Sans'),
url('dejavu/DejaVuSans-BoldOblique.ttf')
format('truetype');
font-weight: bold;
font-style: italic;
}
太字の場合は次のとおりであることを忘れないでください。 font-weight;イタリック体の場合は、 font-style
