ytooyamaのブログ

サーバ構築とか、仕事で発見したこととか、趣味のこととかを書いています。

最近のバージョンのSafariでデフォルトフォントとサイズを指定する

大抵のブラウザーにはデフォルトのフォントとサイズを指定する設定があります。これらのフォントはHTMLファイルやCSSなどでフォントやフォントサイズが指定されていない場合、ここで設定したフォントとフォントサイズでコンテンツを表示します。

現在のバージョンのSafariには、デフォルトのフォントとサイズを指定する設定はありません。そのため、何も設定していない場合、上記のようなコンテンツを表示した場合、Safariでは明朝体で日本語が表示されます。

これをゴシック体や特定のフォントを使って表示することができます。CSSファイルを作成してSafariでそのCSSを読み込むように設定すれば、定義した設定をSafariに行うことができます。

f:id:ytooyama:20180724214721p:plain

これらの方法は「Safari 明朝体フォント」などのキーワードでWeb検索すると、デフォルトのフォントを指定する方法は多く見つかります。例えばこのような感じです。

a:link{text-decoration:none !important;}
a:visited{text-decoration:none !important;}
a:hover {text-decoration:underline !important;}
    body {
        font-family: 'SourceHanSansJP-Normal';
    }

デフォルトのフォントサイズは上記のコードに次のように一行追加するだけでうまくいきました。

a:link{text-decoration:none !important;}
a:visited{text-decoration:none !important;}
a:hover {text-decoration:underline !important;}
    body {
        font-size: 14px;
        font-family: 'SourceHanSansJP-Normal';
    }

次のHTMLファイルを作成して、Safariドラッグ&ドロップすると確認できます。上記のCSSファイルを変更後は、一度設定を開いて読み込み直してください。レンダリング結果が変わるのが確認できます。font-size: 14px;のサイズを小さくしてSafariCSSを再読み込みすると、そのサイズでHTMLが表示されます。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  <h1>Safariのデフォルトフォントを変更</h1>
    <p>Safariで使用するフォントが指定されていないページにアクセスすると、「明朝体」フォントで表示されます。</p>
    <p><b>CSSファイル</b>で使用するフォントを定義して設定を行うと、フォントが指定されていないページを指定したフォントで表示することができます。</p>
</body>
</html>

フォントサイズのイメージを以下に貼り付けます。

14px

f:id:ytooyama:20180724215616p:plain:w240

8px

f:id:ytooyama:20180724215627p:plain:w240

さて、font-familyで指定するフォント名ですが、Font Bookでフォントを選んでフォントの情報に含まれる「PostScript名」を指定すれば良いです。

f:id:ytooyama:20180724220532p:plain