MENU

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

CATEGORY

大学 (99) 航空宇宙 (67) 写真 (42) 旅行 (22) 飯・酒 (12) コンピュータ (101) その他 (25)

TAG

ARCHIVE

RECENT

【カメラ】FUJIFILM X-T3用にZEISSのMakro-Planarを買った -Touit 2.8/50M- 【宇宙】SPACETIDE 2019 に参加してきました 【D進】博士後期課程 出願しました! 【写真】WALL DECORで写真を印刷した いろいろ考える飲み会だった

【フォント】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 (※公開されることはありません)

コメント