Q&A
何点か質問です。
・Scssは、ビルドしていますか？ビルド後のCSSをHTMLで読み込んでいますか？
・他のスタイルは効いていますか？
・一番指定したいフォントは何ですか？
その指定したいフォントは、デバイスに入っている状態ですか？
bodyのfont-familyを指定しましたが、変わりません。Macを使っています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title> 6 <link rel="stylesheet" href="css/iSara.css"> 7 </head> 8 <body> 9 <header> 10 <div class="header-left"> 11 <img src="image/isaralogo.png"> 12 <p>バンコクのノマドエンジニア育成講座</p> 13 </div> 14 <div class="header-right"> 15 <a href="">お問い合わせ / 資料請求はこちら</a> 16 </div> 17 18 </div> 19 </header> 20 <div class="title"> 21 <div class="title-top"> 22 <div class="title-text"> 23 <h2>プログラミングで<br>人生の安定を手にいれよう</h2> 24 <img src="image/isaralogolarge.png"> 25 <h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3> 26 </div> 27 </div> 28 </div> 29 <div class="recruitment"> 30 <div class="recruitment-text"> 31 <h3 class="first">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</h3> 32 </div> 33 </div> 34 </body> 35</html>
scss
1@charset "utf-8"; 2*{ 3 margin:0; 4 padding:0; 5} 6body{ 7 width:1425px; 8 font-family: "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ W3", "Hiragino Sans", "ヒラギノ角ゴシック W3", sans-serif; 9} 10header{ 11 height:75px; 12 background-color:white; 13 position: fixed; 14 top:0; 15 width:100%; 16 z-index: 1000; 17 .header-left{ 18 float:left; 19 margin-left:1px; 20 img{ 21 height:45px; 22 width:128px; 23 margin-top: 14px; 24 margin-left:127px; 25 26 } 27 p{ 28 display: inline-block; 29 font-size: 14px; 30 letter-spacing: 1.5px; 31 font-weight: 600; 32 color:#333333; 33 vertical-align: bottom; 34 margin-left:0.5px; 35 margin-bottom:9px; 36 } 37 } 38 .header-right{ 39 float:right; 40 a{ 41 display: inline-block; 42 background-color:#da6b64; 43 44 text-decoration: none; 45 color:#fff; 46 font-size: 14px; 47 font-weight:300; 48 letter-spacing:1.5px; 49 border-radius: 25px; 50 padding:11px 40.5px; 51 margin-top: 16px; 52 margin-right:127px; 53 text-align: center; 54 &:hover{ 55 background-color:#d84940; 56 } 57 } 58 } 59} 60.clear{ 61 clear:both; 62} 63.title-top{ 64 height:500px; 65 background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg"); 66 background-size:cover; 67 background-position: center center; 68 margin-top:75px; 69 .title-text{ 70 padding-top:88px; 71 h2{ 72 color:#333333; 73 line-height: 54px; 74 font-size:28px; 75 font-weight:700; 76 letter-spacing: 1.5px; 77 text-align: center; 78 } 79 img{ 80 display:block; 81 height:111px; 82 margin-top:5px; 83 margin-left: auto; 84 margin-right:auto; 85 } 86 h3{ 87 text-align:center; 88 color:#333333; 89 letter-spacing: 1.5px; 90 margin-top:40px; 91 font-size:20px; 92 line-height: 22px; 93 } 94 } 95} 96.recruitment{ 97 height:600px; 98 background-color:#ebb94d; 99 .recruitment-first{ 100 color:#fff; 101 text-align: center; 102 letter-spacing: 1.5px; 103 line-height: 32px; 104 padding-top:30px; 105 font-size:20px; 106 font-weight:300; 107 } 108 .recruitment-second{ 109 color:#c7254e; 110 width:465px; 111 height:25px; 112 background-color:#f9f2f4; 113 margin-left:auto; 114 margin-right:auto; 115 font-weight:700; 116 font-size:18px; 117 border-radius: 5px; 118 text-align:center; 119 margin-top:15px; 120 font-family:Menlo, Monaco, Consolas, "Courier New", monospace; 121 letter-spacing: 1.5px; 122 } 123 a{ 124 font-size:28px; 125 letter-spacing: 1.5px; 126 font-weight:500; 127 text-decoration: none; 128 width:1030px; 129 height:105px; 130 line-height: 105px; 131 background-color: #da6b64; 132 color:rgb(255, 255, 255); 133 display: block; 134 text-align: center; 135 margin-top:47px; 136 margin-left: auto; 137 margin-right: auto; 138 border-radius: 60px; 139 span{ 140 margin-left:2.5px; 141 margin-right:2.5px; 142 } 143 &:hover{ 144 background-color:#d84940; 145 } 146 } 147 .recruitment-third{ 148 color:rgb(255, 255, 255); 149 font-size:20px; 150 text-align: center; 151 letter-spacing: 2.4px; 152 margin-top:67px; 153 font-weight: 600; 154 } 155 span{ 156 margin-left:8px; 157 margin-right:8px; 158 } 159 .recruitment-forth{ 160 color:rgb(255, 255, 255); 161 font-size:20px; 162 text-align: center; 163 letter-spacing: 2.4px; 164 margin-top:35px; 165 font-weight: 600; 166 } 167 .recruitment-fifth{ 168 color:rgb(255, 255, 255); 169 font-size:20px; 170 text-align: center; 171 letter-spacing: 2.4px; 172 margin-top:35px; 173 font-weight: 600; 174 } 175 .buttons{ 176 margin-top:25px; 177 text-align: center; 178 .twitter-share-button{ 179 display: inline-block; 180 181 } 182 .fb-like{ 183 vertical-align: bottom; 184 margin-bottom:5.5px; 185 } 186 } 187} 188.how-to{ 189 height:586px; 190 background-image:url("https://isara.life/wp-content/themes/isara_v2/img/introbottom.jpg"); 191 background-size:cover; 192 background-position: center center; 193} 194.about{ 195 height:555px; 196 background-color:#fef5e0; 197}
> Macを使っています。
では、質問修正依頼に応えてはいただけておりません。
問題解決には、私の質問修正依頼が必要になるかと思いますので、どうかよろしくお願いします。
コンパイルはしています
他のCSSは効きます
一番い指定したいフォントは、Hiragino Kaku Gothic Proです
ヒラギノ角ゴシックが効かないってことですね・・・。
わかりました。
回答に移ります。
回答2件
0
【Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ - かもメモ】
https://chaika.hatenablog.com/entry/2019/10/29/083000
投稿2020/02/09 06:35
総合スコア69606
0
ベストアンサー
Hiragino Kaku Gothic Proが適用されないとのことなので、以下のこと確認してください。（どれかが当てはまると思います）
- PCにそのフォントが入っていない
ヒラギノ入ってると思いきや、違うフォント名だった、なんてあります。
特に新しい最近のmacOSだと、ヒラギノ系は少しフォント名や仕様が違ったような気がします。
- CSSで使用する際のフォント名が異なる
これ、フォントブックとかで、詳しく調査した時、表記名が違ったりする時があり、CSSで使用する際はそちらの表記でないと適用されない、などありますので、細かく調べられるといいかと思います。
今回の場合、
Hiragino Kaku Gothic Proではなく、
ヒラギノ角ゴシック Proの法が正しかったり、
ﾋﾗｷﾞﾉ角ｺﾞと半角カナの方が正しかったりするので、いろいろと試す必要があります。
特にヒラギノ系は、表記揺れがあり、どれがCSS適用時に当てはまるのかは、調査が必要です。
（私も適用するのにけっこう何個も試した記憶があります）
- キャッシュが効いていて、適用が反映されてない
スーパーリロードをお試しください。
macOSは、
Shift + Cmd + R でできます。
投稿2020/02/09 06:05
総合スコア9555
使っているmacのファインダーにあるFontsの中身は空っぽでした。
これが原因でしょうか？
そんなわけありません。
それは恐らく、ユーザーフォントです。
隠しディレクトリから入れる、
（ライブラリ）システムの方のFontsには何かしら入ってるはずです。
（でないとそもそも、全ての文字が表示不可になるので）
画像を添付しましたが、これは関係ないですか？
ライブラリシステムですね、確認しいてみます
home>ライブラリ>fontsの手順で確認したところ、何も入っていませんでした。
え・・・。
消したとかじゃなくてですか？
/Users/ユーザー名/Library/Fonts/
にも、
/System/Library/Fonts/
にも入ってないんですか？
ログインするユーザー変えてもダメですか？
Font book をみてみたんですけど、Menloもヒラギノ角ゴシックW3もありました。
これは関係ありませんか？
関係あります。
（Menloはありませんが）
ヒラギノ角ゴシックW3は、Proとか、ProNといった文字がついていますか？
ついていないのであれば、質問者さんのCSSには、Proの文字が入っているので効かないかと。
とにかく、フォント名に使われている文字列を正確につけなければ、CSSには反映されません。
fontの名前を変更しました。
そもそも、font-weightがうまく効かず、その原因としてfontが適用されていないのではないか、ということでこの質問をしました。
そのfontが適用されているかどうかは、font-weightがt正しく適用されているかどうかで判断していたのですが、他に実際にfont-familyが正しく効いていることを確かめる方法はありますか？
今になって確認の仕方を聞いてすみません。
その確認の仕方はだめです。
そもそも問題が違います。
前の質問で、font-weightが効くか効かないかは、フォントによると回答があったはずです。
よって、その判断基準でフォント自体が適用されてるか否かを判別するのは間違いです。
デベロッパーツールを使えば、現在なんのフォントが適用されているか確認できます。
デベロッパーツールの使い方はご自身で調べて下さい。
（現代のブラウザの標準機能です）
font-familyが効いているならfont-weightも変わると思ってそのような確認方法をしていました。
検証で確認したところ、font-familyは聞いているようです。（画像は、bodyとrecruitment-secondのフォントです。）
しかし、font-weightは変わらずですね。
作業しているうちにほとんどの箇所でfont-weightが大体効いてるので、大丈夫かなと思いました。長々とありがとうございました。
解決されたならいいのですが、
そこは、Computed Styleの項目を見ているのでしょうか？
Computed Styleは、実際にどの値が適用されているかが記載されている箇所ですので、
そこであれば、大丈夫かと思います。
あなたの回答
tips
プレビュー
