Q&A
ありがとうございます。
HTMLでは記述できるのですかね？
上記のような書き方でも、
実際ヒラギノ角ゴはWindowsに通常はないフォントなので結果的にはこちらでも正解なのでしょうかね？
実現したいこと
・Macはヒラギノ角ゴシック
※ボタンとメニューのみW3、それ以外はW4
・Windowsは游ゴシック
・英文はEuropa-bold（AdobeのWebフォントでした）
という指示通りになるようcssを書きたいです。
知りたいこと
１．
デバイスによってフォントを指定する場合の書き方は
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
でいいのでしょうか？（Macが最優先、なければWin？に、自動的になりますか？）
それともWindowsはこれ、Macはこれ、
といった記述方法もあるのでしょうか？
２．
フォントWeightについて、
角ゴシックW4をフォントファミリーに指定したい場合の書き方がわかりません。
下のような記述をした場合、角ゴシックのデフォルトの値はW3になるのでしょうか？
それとも、body全体にW4を指定して、W3をボタンとメニューそれぞれに指定
で、太さをそれぞれ書いたほうがいいのでしょうか？
３．
AdobeのWebフォントについて
・HTMLのhead内にlinkを書く
・CSSに@import url(・・・・・・・・・・・・・・・);
・指定したい文字に直接 font-family: "Europa-Bold"; で指定
で正しいでしょうか？
Body全体のfont-familyに第３候補などで記述するべきですか？
該当のソースコード
css
1font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
コーディングの勉強をしており架空の指示書通りにコーディングする課題をしていますが、
今回の答えを教えてくれる方がいなくこちらで質問させてただきました。
よろしくお願いしますm(_ _)m
回答2件
0
ベストアンサー
まずfont-familyのルールはざっくりこんな感じです。
①先に書かれているフォントが優先される
②デバイスが対応していないフォントの場合、次のフォントが適用される
③フォントが対応していない言語の場合、次のフォントが適用される
※詳細は「Font-Family 指定」とかでググってみてください
１．
デバイスによってフォントを指定する場合の書き方は
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
でいいのでしょうか？（Macが最優先、なければWin？に、自動的になりますか？）
上記をルールをもとに考えます。
Windowsの場合、①のルールにより'Hiragino Sans'を適用しようとするが②のルールにより適用されず、'Yu Gothic'が適用されます。
Macの場合、①のルールにより'Hiragino Sans'が適用されます。
よって、大枠実現したいことと同じになります。
※「Macが最優先～」というルールではないです
余談ですが…
正確に言うと、ヒラギノ角ゴシックはデフォルトではWindowsで搭載されていないだけで、WindowsのPCを使っている人が個人でヒラギノ角ゴシックのフォントをPCにインストールしていた場合は、Windowsでもヒラギノ角ゴシックで表示されることになります。
もし厳密にやるなら、JavaScriptでuserAgentから取得して適用させるCSSを変更、とかになるかと思います。
２．
フォントWeightについて、
角ゴシックW4をフォントファミリーに指定したい場合の書き方がわかりません。
下のような記述をした場合、角ゴシックのデフォルトの値はW3になるのでしょうか？
それとも、body全体にW4を指定して、W3をボタンとメニューそれぞれに指定
で、太さをそれぞれ書いたほうがいいのでしょうか？
以下のように末尾にW0〜W9を付加して太さの指定ができます。
CSS
1font-family: 'Hiragino Sans W3'
指定無しの場合、h1-h6タグはW7相当、Pタグ等はW4が自動設定されるようです。
フォントの種類や太さなどを指定しない場合は基本何になっても文句は言えないので、できたらこうなってほしいという希望があるなら指定するのが基本かと思います。
body全体にW4を指定して、W3をボタンとメニューそれぞれに指定で、太さをそれぞれ書いたほうがいいのでしょうか？
はい、以下のような感じですかね。
CSS
1body{ 2font-family: 'Hiragino Sans W4' 3} 4.button, .menu{ 5font-family: 'Hiragino Sans W3' 6}
font-weightで指定するのもありかもしれません。
font-weight:300 = W3なので…
CSS
1body{ 2font-family: 'Hiragino Sans' 3font-weight: 400; 4} 5.button, .menu{ 6font-weight: 300; 7}
３．
AdobeのWebフォントについて
・HTMLのhead内にlinkを書く
・CSSに@import url(・・・・・・・・・・・・・・・);
・指定したい文字に直接 font-family: "Europa-Bold"; で指定
引用テキスト
で正しいでしょうか？
Body全体のfont-familyに第３候補などで記述するべきですか？
HTMLのhead内にlinkを書く、または、CSSに@import url(); のどちらかをしたうえで、
指定したい文字に、font-family: "Europa-Bold"; で指定、でOKです。
Body全体のfont-familyに第３候補などで記述するべきですか？
指定したい箇所によります。
例えばタイトルの英文だけ、のような形であればタイトルだけに指定したり、
サイト全体の英文に指定したいのであれば、Body全体に指定します。
全体に指定する場合は、第３候補にしてしまうと、先に指定しているヒラギノ角ゴシックと游ゴシックが英文も対応しているので、①のルールで英文もヒラギノ角ゴシックや游ゴシックになってしまいます。
そのため、以下のように英文のみのフォントを先に指定します。
CSS
1font-family: "Europa-Bold", 'Hiragino Sans';
こうすると、英文の場合は、①のルールにより"Europa-Bold"が、
日本語文の場合は、"Europa-Bold"が日本語に対応していないので③のルールにより次のフォントが適用され、１.の回答と同じ結果になります。
投稿2023/01/10 05:23
総合スコア125
0
CSSで直接デバイス判定は出来なかったと思います。
優先度については
font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。 もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。
投稿2023/01/08 03:34
総合スコア1453
あなたの回答
tips
プレビュー
