Q&A
「@font-face」はwebフォントを各端末で使えるようにするためのモノです。
「メイリオ」はwebフォントとして使用出来ません。
前提・実現したいこと
CSSでフォントをArial>Meiryo>sans-serifの順に指定しているのですが、customクラスのみ数字にMeiryoを用いて表示したいです。
その際に数字のみ@font-faceでnormal (400)とbold (700)の2種類を指定しているのですが、boldのみ反映されません。
発生している問題・エラーメッセージ
@font-face，unicode-range等を用いて下記のようなスタイルを記述しましたが、太字スタイルが反映されません。
コメントアウトしているPostScript名を指定した場合はMac環境のSafari以外のブラウザ、Windows環境のIE，Edge，Firefoxのみ期待通りの結果が得られました。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="./font.css"> 6 </head> 7 <body> 8 <p>ABCabc123あいう安以宇</p> 9 <p style="font-weight: bold">ABCabc123あいう安以宇</p> 10 <p class="custom">ABCabc123あいう安以宇</p> 11 <!-- ↓の数字にスタイルが反映されない --> 12 <p class="custom" style="font-weight: bold">ABCabc123あいう安以宇</p> 13 </body> 14</html>
CSS
1@font-face { 2 font-family: 'MyFont'; 3 src: local('Meiryo'); 4 unicode-range: U+30-39; 5 font-style: normal; 6 font-weight: normal; 7} 8 9@font-face { 10 font-family: 'MyFont'; 11 src: local('Meiryo'); 12 /* src: local('Meiryo-Bold'); PostScript名はChrome for Windowsでは効果なし */ 13 unicode-range: U+30-39; 14 font-style: normal; 15 font-weight: bold; 16} 17 18.custom { 19 font-family: 'MyFont', 'Arial', 'Meiryo', sans-serif; 20} 21 22* { 23 font-size: 32px; 24 font-family: 'Arial', 'Meiryo', sans-serif; 25}
試したこと
- font-familyの変更 ('メイリオ', 'Meiryo Bold', 'メイリオ ボールド')
- font-weightの値を数値で指定
補足情報（FW/ツールのバージョンなど）
期待するレンダリング結果
反映されることを確認済みのブラウザ
- Firefox for Windows 69.0
- Edge 44.18362.329.0
- Internet Explorer 11.295.18362.0
- Chrome for macOS 76.0.3809.132
- Firefox for macOS 69.0
反映されないことを確認済みのブラウザ
- Chrome for Windows 76.0.3809.132
- Opera for Windows 63.0.3368.71
- Edge 78.0.262.0 dev
- Safari 12.1.2 (14607.3.9)
回答1件
0
自己解決
投稿2019/09/11 01:35
総合スコア8
あなたの回答
tips
プレビュー
