質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

1359閲覧

CSSのFont-Familyの指定、デバイスごとでフォントを変えたい場合

antevasin

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2023/01/08 03:20

編集2023/01/08 06:19

実現したいこと

・Macはヒラギノ角ゴシック
※ボタンとメニューのみW3、それ以外はW4
・Windowsは游ゴシック
・英文はEuropa-bold(AdobeのWebフォントでした)

という指示通りになるようcssを書きたいです。

知りたいこと

1.
デバイスによってフォントを指定する場合の書き方は
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
でいいのでしょうか?(Macが最優先、なければWin?に、自動的になりますか?)

それともWindowsはこれ、Macはこれ、
といった記述方法もあるのでしょうか?

2.
フォントWeightについて、
角ゴシックW4をフォントファミリーに指定したい場合の書き方がわかりません。
下のような記述をした場合、角ゴシックのデフォルトの値はW3になるのでしょうか?
それとも、body全体にW4を指定して、W3をボタンとメニューそれぞれに指定
で、太さをそれぞれ書いたほうがいいのでしょうか?

3.
AdobeのWebフォントについて
・HTMLのhead内にlinkを書く
・CSSに@import url(・・・・・・・・・・・・・・・);
・指定したい文字に直接 font-family: "Europa-Bold"; で指定

で正しいでしょうか?
Body全体のfont-familyに第3候補などで記述するべきですか?

該当のソースコード

css

1font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;

コーディングの勉強をしており架空の指示書通りにコーディングする課題をしていますが、
今回の答えを教えてくれる方がいなくこちらで質問させてただきました。

よろしくお願いしますm(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

antevasin

2023/01/10 02:25

ありがとうございます。 HTMLでは記述できるのですかね? 上記のような書き方でも、 実際ヒラギノ角ゴはWindowsに通常はないフォントなので結果的にはこちらでも正解なのでしょうかね?
guest

回答2

0

ベストアンサー

まずfont-familyのルールはざっくりこんな感じです。
①先に書かれているフォントが優先される
②デバイスが対応していないフォントの場合、次のフォントが適用される
③フォントが対応していない言語の場合、次のフォントが適用される
※詳細は「Font-Family 指定」とかでググってみてください

1.
デバイスによってフォントを指定する場合の書き方は
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を変更、とかになるかと思います。

2.
フォント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}

3.
AdobeのWebフォントについて
・HTMLのhead内にlinkを書く
・CSSに@import url(・・・・・・・・・・・・・・・);
・指定したい文字に直接 font-family: "Europa-Bold"; で指定
引用テキスト
で正しいでしょうか?
Body全体のfont-familyに第3候補などで記述するべきですか?

HTMLのhead内にlinkを書く、または、CSSに@import url(); のどちらかをしたうえで、
指定したい文字に、font-family: "Europa-Bold"; で指定、でOKです。

Body全体のfont-familyに第3候補などで記述するべきですか?

指定したい箇所によります。
例えばタイトルの英文だけ、のような形であればタイトルだけに指定したり、
サイト全体の英文に指定したいのであれば、Body全体に指定します。
全体に指定する場合は、第3候補にしてしまうと、先に指定しているヒラギノ角ゴシックと游ゴシックが英文も対応しているので、①のルールで英文もヒラギノ角ゴシックや游ゴシックになってしまいます。
そのため、以下のように英文のみのフォントを先に指定します。

CSS

1font-family: "Europa-Bold", 'Hiragino Sans';

こうすると、英文の場合は、①のルールにより"Europa-Bold"が、
日本語文の場合は、"Europa-Bold"が日本語に対応していないので③のルールにより次のフォントが適用され、1.の回答と同じ結果になります。

投稿2023/01/10 05:23

tori72

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

antevasin

2023/01/13 01:41

ご丁寧にありがとございます!上記の内容で全て解決できそうです。本当にありがとうございました!
tori72

2023/01/13 07:06

よかったです! 解決したのであればベストアンサーを選んで質問のクローズをお願いします。 CSSは最初のうちは悩む点が多いと思いますが、勉強頑張ってください^_^
guest

0

CSSで直接デバイス判定は出来なかったと思います。

優先度については

font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。 もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。

https://willcloud.jp/knowhow/font-family/#:~:text=font%2Dfamily%E3%81%AB%E8%A4%87%E6%95%B0%E3%81%AE,%E3%82%92%E6%8E%A2%E3%81%97%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

投稿2023/01/08 03:34

yuma.inaura

総合スコア1453

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問