MENU

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

CATEGORY

大学 (91) 航空宇宙 (59) 写真 (33) 旅行 (16) 飯・酒 (11) コンピュータ (94) その他 (20)

TAG

ARCHIVE

RECENT

【写真】都市夜景撮影 英会話をまた習い始めました 【Perl】YAPC::Tokyo 2019 にスタッフとして参加してきました むちゃくちゃな就活をして,内定がでたので,博士進学が決まった 【写真】望遠レンズで白黒(ACROS)撮影@銀座

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

コメント