WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Googleとアドビ、オープンソースフォント「Noto Serif CJK(源ノ明朝)」をオープンソース化

f:id:yachin29:20170404204955p:plain

Googleアドビシステムズ株式会社は4日、日本語では明朝体にあたる新たなセリフ書体を発表した。Googleは「Noto Serif CJK」、アドビは「源ノ明朝」の名称でオープンソースフォントとして無償で提供する。
Noto Serif CJKは、2014年にリリースされたゴシック体にあたるサンセリフ書体「Noto Sans CJK」のフォントファミリー。ウェイトはExtraLight/Light/Regular/Medium/SemiBold/Bold/Blackの7つが用意されており、日本語、中国語簡体字、中国語繁体字、韓国語に対応し、7つのウェイトと6万5535の字形を収録。
Unicode縦書きレイアウト標準にも準拠していて、縦書きでも綺麗に見せることが出来る。



developers-jp.googleblog.com



源ノ明朝 オープンソース Pan-CJK 書体
source.typekit.com


ダウンロード先

スタイルシートの記述

CSSなどに下記ソースコードを記述する。ディレクトリは環境に合わせて変更する

@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Serif Japanese';
   font-style: normal;
   font-weight: 700;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format('opentype');
 }

body{
    font-family: 'Noto Serif Japanese', sans-serif;
}