Q&A
質問の途中で投稿してしまいましたか？
編集をお願いします。
誤って質問を書く前に投稿してしまっていました。
独学でHTMLとCSSの勉強を始めて半月ほどが経つ者です。
CSSの練習でh1タグにsmall-capsを指定しようと思い、画像の様に書いたのですが、ブラウザで反映されません。
画像の書き方は、YouTubeの解説動画を見ながら、その動画内で書かれている通りに書きました。
small-caps以外の指定は反映されていますが、何故かそこだけ反映されません。
エディタはSublime textを使っており、パソコンのOSはWindows8.1です。
ちなみにYouTubeの動画の方はマックを使っている様でした。
OSなどによっても出来る事は変わってくるのでしょうか？
教えて頂けると嬉しく思います。
よろしくお願いします。
回答2件
0
こんにちは。
当方の環境でご提示のコードを試してみたところ、適用されたフォントはメイリオで、small-capsが効きませんでした。
イタリックを外したところ、small-capsが効きましたが、微妙な感じです。
また、Firefoxで試したところ、イタリックとsmall-capsを効かせることができましたが、微妙な感じです。
調べてみたところ、Chrome では font-synthesis プロパティが未実装のようです。
font-synthesis - CSS: カスケーディングスタイルシート | MDN
以上より推測ですが、
- メイリオには、イタリック+small-capsのグリフがない
- Chromeには、イタリック+small-capsのフォント合成機能がない（またはオフになっている）
ということではないでしょうか。
解決方法ですが、イタリック+small-capsのグリフがあるフォント（たとえば游ゴシック）を指定すればいいと思います。
投稿2021/01/29 01:40
総合スコア36930
細かく調べて下さりありがとうございます。
昨日の夜パソコンが急に壊れたので、今日MacBookを買って来て、該当のファイルをChromeで開いた所、きちんと指定した通りに表示されました。
もしかしたら前のパソコンの不具合だったのかもしれません。
お時間をいただき本当にありがとうございました。
いや、WindowsからMacに変えたらフォント変わりますよね……
回答読みました？
0
chromeでもローカルでもsmall-capsは表示できていました。
コードは問題ないのでブラウザーの問題だと思います。
どのブラウザーで見ていますでしょうか。
投稿2021/01/28 12:05
総合スコア65
ご回答ありがとうございます。
ブラウザはChromeを使っています。
ブラウザはChromeを使っています。
＞問題ないですね..chromeのデべロッパーツールでみてみると、cssが無効になってたり上書きされていないでしょうか。
それでも解決しない時は
chrome画面のキャプチャも貼っていただけると助かります。
遅くなって申し訳ありません。
昨日の夜パソコンが急に壊れたので、今日MacBookを買って来て、該当のファイルをChromeで開いた所、きちんと指定した通りに表示されました。
もしかしたら前のパソコンの不具合だったのかもしれません。
お時間をいただき本当にありがとうございました。
あなたの回答
tips
プレビュー
