MENU

溶けかけてるうさぎ HP GALLERY BLOG TOP RECENT ARTICLES POPULAR ARTICLES ABOUT THIS BLOG

CATEGORY

大学 (140) 仕事 (17) 航空宇宙 (104) 写真 (77) 旅行 (32) 飯・酒 (17) コンピュータ (118) その他 (44)

TAG

ARCHIVE

RECENT

【カメラ】X100 シリーズが好きすぎる(主にリーフシャッタ) 【カメラ】X100V から X100VI に買い替えました 【自宅サーバー】Google Domains から Cloudflare にドメインを移管 【カメラ】FUJIFILM XF レンズのサイズ比較ができるようにしてみた 【写真】自作写真閲覧ページにてフィルムシミュレーションで写真をフィルタできるようにした

【フォント】Webフォントとして,Noto Sans JP をあてた

事象発生日:2018-08-21

記事公開日:2018-08-21

アクセス数:23058

このサイトの基本フォントはヒラギノ角ゴ ProN W3であったが,ヒラギノがインストールされていないWindows環境では游ゴシックが使われていた.

Google Chromeでこの游ゴシックがかすれて見づらいという問題があったため,WebフォントであるNoto Sans JPをあてることにした.

1.CSSの更新

を参考に,以下のフォントを当てる.

@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

.hoge {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

2.比較

太さ,ブラウザの対応状況の比較.

 

[normal]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[bold]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[lighter]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[bolder]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[100]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[200]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[300]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[400]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[500]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[600]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[700]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[800]

【フォント】Webフォントとして,Noto Sans JP をあてた.

[900]

【フォント】Webフォントとして,Noto Sans JP をあてた.

 

 

今、ベースフォントはnormal (400) を使っているけど, 300くらいにしてみようかな.

3.出典

Google Fonts. Early Access. Retrieved August 21, 2018, from https://fonts.google.com/earlyaccess#Noto+Sans+JP

コメントを投稿

名前

Email (※公開されることはありません)

コメント