Q&A
コメントありがとうございます。
デザイン重視のサイトで、font-plusが重たいため、
Google-fontsに乗り換えをしています。
できるだけweightの種類がほしいのです。。
weightが異なるGooglefontsを@font-faceで指定をしているが、
weightが600を堺にしか太くなりません。
CSS
1@font-face{ 2 font-family: 'Noto Sans JP', sans-serif; 3 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Thin.woff") format('woff'), 4 url("../fonts/Noto_Sans_JP/otf/NotoSansJP-Thin.otf") format('truetype');; 5 font-weight: 100; 6} 7@font-face{ 8 font-family: 'Noto Sans JP', sans-serif; 9 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Light.woff") format('woff'), 10 url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Light.otf") format('truetype');; 11 font-weight: 300; 12} 13@font-face{ 14 font-family: 'Noto Sans JP', sans-serif; 15 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Regular.woff") format('woff'), 16 url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Regular.otf") format('truetype');; 17 font-weight: 400; 18} 19@font-face{ 20 font-family: 'Noto Sans JP', sans-serif; 21 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Medium.woff") format('woff'), 22 url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Medium.otf") format('truetype');; 23 font-weight: 500; 24} 25@font-face{ 26 font-family: 'Noto Sans JP', sans-serif; 27 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Bold.woff") format('woff'), 28 url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Bold.otf") format('truetype');; 29 font-weight: 700; 30} 31@font-face{ 32 font-family: 'Noto Sans JP', sans-serif; 33 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Black.woff") format('woff'), 34 url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Black.otf") format('truetype');; 35 font-weight: 900; 36} 37 38body{ 39 font-family:'Noto Sans JP',sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif 40} 41 42p.text{ 43font-weight: 300; 44}//ここで指定した太さが適応されない
ちなみに、styleタグで下記を指定すると、指定のweightが動きます。
CSS
1<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap" rel="stylesheet">
ただ、今回はサイト全体の指定なので、@font-faceを使用したいのです。
初歩的なことでつまづいています。。
どうかご教授をお願いいたします。。！
回答3件
0
まず現象の切り分けとして
css
1@font-face{ 2 font-family: 'Noto Sans JP'; 3 src: url("../fonts/Noto_Sans_JP/woff/NotoSansJP-Thin.woff") format('woff'), 4 url("../fonts/Noto_Sans_JP/otf/NotoSansJP-Thin.otf") format('truetype'); 5 font-weight: 100; 6} 7 8
の単体での表示を試してみてはいかがでしょうか？
Noto Sans JPには100の太さが用意されているので、
本来であれば
このような太さの文字が出ると思います。
単体で表示されるのであれば、それ以外の場所に原因があり、
表示されないのであれば、ファイルの場所や記載方法、そもそもフォーマットできているのなど原因追及が進むと思います。
投稿2019/07/09 08:58
編集2019/07/11 03:24
総合スコア716
0
9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、 フォントの太さとして実際に指定する値は｢bold｣のみで事足りることが多いようです。
効くフォントと効かないフォントがあるということですね。
一部細くしたところであまりUI上はよろしくないとは思いますので、それなら細いフォントを使う、ということになります。
強調でboldを使いたい場面は少なくないですが、細くしたい場面ってほとんど思い浮かばないですね（それならフォントサイズ小さくするか、取り消し線入れるか、別に適切な表現がありそうです。）
ドキュメントからも引用
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Google翻訳：
ほとんどのフォントは、一般的なウェイト名マッピングの番号の1つに対応する特定のウェイトを持っています。ただし、可変フォントと呼ばれる一部のフォントは、多少細かい粒度でさまざまなウェイトをサポートできます。これにより、選択したウェイトをより細かく制御することができます。
つまり「可変フォントなら細かい制御は可能」とも読み解けます。
もちろん、font-weightの細かい指定をどこまで受け入れるかはフォント次第ということですね。
投稿2019/07/09 08:44
編集2019/07/09 08:53
総合スコア80888
そこはWebなので紙媒体と違って融通がききにくい場合もあるでしょうね。
あまり特殊なフォントにすると利用者に反映されませんし。
googleapisが利用できるならそちらでやるしかないようにも思います。
0
すみません、CSSに「;;」がついており、誤字でした。
↑
解決していませんでした。
修正してもwightは指定できません。
投稿2019/07/09 07:43
編集2019/07/09 07:46総合スコア13
;は単に終端を示すものなので「それがあるから効かない」ということはないと思いますが・・・
CSS：
p {
font-size:5px;;
padding:20px;
color:red;;
}
HTML
<p>test</p>
現段階でフォントは適用されていますか？
コメントありがとうございます。
p.textにfont-familyを設定しても変わりませんでした。。
body{
'Noto Sans JP',sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif
}
これだとフォントが適用されてないですね。
現段階でフォントは適用されています。
確認済です。
いえ、関係なさそうですね。
;はあくまで終端です。
もちろん指定の途中に入り込んでいれば正しい構文ではないので無効になりますが、
正しい位置に終端として重ねられているのであれば、何個あっても指定に影響はありません。
p {
font-size:25px;;;;;;
font-family: "Noto Sans JP", 'arial black';;;;;;;;;;;;;;
padding:20px;
color:red;;
}
そうなんですか？？
bodyの'Noto Sans JP',sans-serif,を消すとフォントが変化したので、適用されていると思います。
下記のみで試してもweightは効きません。
body{
'Noto Sans JP',sans-serif;
}
ちなみに↑に
font-weight:bold;
を追加するとちゃんと太字になります。
コメントありがとうございます。
;は何個あっても影響ないのですね。
いえ、bodyのfont-familyが抜けていたので、そう思ったのですが、実際はちゃんと書かれているということですね
理解しました。
body{
'Noto Sans JP',sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif
}
↓
body{
font-family:'Noto Sans JP',sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif
}
ですよね。
そうですね。補完頂きありがとうございます。
font-weight:bold;は効きます。
ただ、細かいweightが効きません。
すみません、記述ミスです。
font-family:は本来入っています。
※修正しました。
回答しました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/09 09:17
2019/07/09 09:18
2019/07/09 09:19
2019/07/09 09:26
2019/07/09 09:34
2019/07/09 09:41
2019/07/09 09:45
2019/07/09 09:46
2019/07/09 09:52 編集
2019/07/09 09:52
2019/07/09 09:56
2019/07/09 09:58
2019/07/09 10:03
2019/07/09 10:12
2019/07/09 10:21
2019/07/09 10:28
2019/07/09 10:31
2019/07/09 11:09
2019/07/10 01:55
2019/07/10 09:14
2019/07/10 09:15
2019/07/10 10:44
2019/07/11 08:27
2019/07/11 11:19
2019/07/12 01:46