MENU

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

CATEGORY

大学 (130) 仕事 (11) 航空宇宙 (91) 写真 (65) 旅行 (28) 飯・酒 (14) コンピュータ (111) その他 (42)

TAG

ARCHIVE

RECENT

【フィルムカメラ】現在使用してる ROLLEICORD アクセサリ 生誕10000日目 記念日 【Archive】「フィルムカメラのススメ」発表スライド (ArkEdge Space LT会) 新卒入社したCookpadを退職しました(後編) ―社会人博士としての2年間― 新卒入社したCookpadを退職しました(前編) ―D進とIT企業への入社と退社―

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

事象発生日:2018-08-21

記事公開日:2018-08-21

アクセス数:21864

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

コメント