MENU

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

CATEGORY

大学 (93) 航空宇宙 (60) 写真 (37) 旅行 (20) 飯・酒 (12) コンピュータ (99) その他 (23)

TAG

ARCHIVE

RECENT

【Perl】吉祥寺.pm18 に参加してきた 【写真】北九州夜景撮影 ~工場夜景と関門海峡~ 【回路設計】回路設計・制作での気付き 【酒蔵】長岡・柏崎の日本酒めぐり 長岡で大気光学現象を観測

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

事象発生日:2018-08-21

記事公開日:2018-08-21

このサイトの基本フォントはヒラギノ角ゴ 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 (※公開されることはありません)

コメント