notosans fontfaceダウンロード-NOTOSANS notosans fontfaceソースコードのダウンロード

notosans fontface

フォントのダウンロード

1.0.0

ダウンロード

Noto sansフォントフェイス

Noto sansフォントフェイスを提供するシンプルなパッケージ。

フォントは、すべてのブラウザー（IE6/非常に古い-osから最新のブラウザまで）に準拠するために.eot 、 .woff2 、 .woff 、 .ttfおよび.svg形式で使用できます。

前提条件

nodejs、
npmまたは糸またはbower。

インストール

 # Install via npm
npm install notosans-fontface --save

# Install via yarn
yarn add notosans-fontface

# Install via bower
bower install notosans-fontface --save

使用法

使用する各フォントについて、このプロジェクトのfontsディレクトリからフォントをコピーする必要があります。

たとえば、 NotoSans Regularフォントの場合、必要なファイルは次のとおりです。

NotoSans-Regular.eot
NotoSans-Regular.woff2
NotoSans-Regular.woff
NotoSans-Regular.ttf
NotoSans-Regular.svg

最新のパッケージ参照woff2フォントファイルのみ。

パッケージ

パッケージは、すぐに使用できるcss 、 less 、 scssおよびstylファイルです。

各パッケージについて、構成されたディレクトリにすべての.eot 、 .woff2 、 .woff 、 .ttfおよび.svgフォントファイルを提供する必要があります。

LessまたはSCSSパッケージファイルを使用している場合は、Notosans-Factfaceのインポート前にnotosans-fontface-path変数をオーバーライドできます。この変数は、フォントが保存されているディレクトリを構成します。デフォルト値は../fontsです。

 // my-website/style.less
@notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/less/notosans-fontface " ;

body {
  font-family : " Noto Sans " , sans-serif ;
}

 // my-website/style.scss
$notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/scss/notosans-fontface " ;

body {
  font-family : " Noto Sans " , sans-serif ;
}

必須パッケージ

「必須」パッケージには、ページをレンダリングするための最小Noto Sansフォントが含まれています。

このパッケージには、次のフォントが含まれています。

notosansレギュラー
イタリック体netos
notosans Bold
notosans bolditalic

利用可能なファイルは次のとおりです。

css/notosans-fontface.css CSSにコンパイルされた必須パッケージ
css/notosans-fontface.min.css CSSに模倣された必須パッケージ
scss/notosans-fontface.scss SCSSの必須パッケージ
less/notosans-fontface.less

woff2フォントファイルのみを参照する最新のバリエーションもあります。

css/notosans-fontface-modern.css CSSにコンパイルされた最新の必須パッケージ
css/notosans-fontface-modern.min.css CSSに模倣された最新の必須パッケージ
scss/notosans-fontface-modern.scss SCSSの最新の必須パッケージ
less/notosans-fontface-modern.less最新の必須パッケージ

全力パッケージ

「All Weight」パッケージには、すべての通常のNoto Sansフォントが含まれています。

このパッケージには、次のフォントが含まれています。

notosanは薄い
notosans thintalic
NOTOSANSEXTRALIGHT
notosans外視線症
notosans光
netosans軽italic
notosansレギュラー
イタリック体netos
notosans培地
中netosans媒体
notosans semibold
notosans semibolditalic
notosans Bold
notosans bolditalic
notosans extrovld
notosans dovololtialic
notosans black
ノトサンblackitalic

利用可能なファイルは次のとおりです。

css/notosans-fontface-allweight.css -CSSにコンパイルされた全力パッケージ
css/notosans-fontface-allweight.min.css -Oll-Weight PackageがCSSに模倣しました
scss/notosans-fontface-allweight.scss SCSSの全力パッケージ
less/notosans-fontface-allweight.less全力パッケージが少ない
woff2フォントファイルのみを参照する最新のバリエーションもあります。
css/notosans-fontface-modern-allweight.css CSSにコンパイルされた最新の全力パッケージ
css/notosans-fontface-modern-allweight.min.css CSSに模倣された最新の全力パッケージ
scss/notosans-fontface-modern-allweight.scss SCSSの最新の全量パッケージ
less/notosans-fontface-modern-allweight.less最新のオールウェイトパッケージ

カスタム

このプロジェクトで提供されるSCSSまたはスタイラスミキシンを使用することにより、独自のNoto Sansフォントと独自のフォントのセットを作成することができます。

fontfaceまたはnotosans-fontfaceミキシンを使用する場合、構成されたディレクトリにすべての.eot 、 .woff2 、 .woff 、 .ttf 、および.svgファイルを提供する必要があります。最新のバリエーションfontface-modernまたはnotosans-fontface-modernミキシンを使用する場合は、構成されたディレクトリに.woff2ファイルを提供するだけです。

notosans-fontfaceまたはnotosans-fontface-modern mixinsについては、 notosans-fontface-path変数を再定義できます。

ミックスインが少ない

 // my-website/style.less
@notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/less/mixins " ;

.notosans-fontface ( " Regular " , 400 , normal );
.notosans-fontface ( " Italic " , 400 , italic );
.notosans-fontface ( " Bold " , 700 , normal );
.notosans-fontface ( " BoldItalic " , 700 , italic );

// .notosans-fontface-modern("Regular", 400, normal);
// .notosans-fontface-modern("Italic", 400, italic);
// .notosans-fontface-modern("Bold", 700, normal);
// .notosans-fontface-modern("BoldItalic", 700, italic);

.fontface ( " Noto Sans CJK JP " , " fonts/JP/ " , " NotoSansCJKjp " , " Regular " , 400 , normal );
.fontface ( " Noto Sans CJK JP " , " fonts/JP/ " , " NotoSansCJKjp " , " Bold " , 700 , normal );

// .fontface-modern("Noto Sans CJK JP", "fonts/JP/", "NotoSansCJKjp", "Regular", 400, normal);
// .fontface-modern("Noto Sans CJK JP", "fonts/JP/", "NotoSansCJKjp", "Bold", 700, normal);

body {
  font-family : " Noto Sans " , " Noto Sans CJK JP " , sans-serif ;
}

SCSSミックス

 // my-website/style.scss
$notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/scss/mixins " ;

@include notosans-fontface ( " Regular " , 400 , normal );
@include notosans-fontface ( " Italic " , 400 , italic );
@include notosans-fontface ( " Bold " , 700 , normal );
@include notosans-fontface ( " BoldItalic " , 700 , italic );

// @include notosans-fontface-modern("Regular", 400, normal);
// @include notosans-fontface-modern("Italic", 400, italic);
// @include notosans-fontface-modern("Bold", 700, normal);
// @include notosans-fontface-modern("BoldItalic", 700, italic);

@include fontface (
  " Noto Sans CJK JP " ,
  " fonts/JP/ " ,
  " NotoSansCJKjp " ,
  " Regular " ,
  400 ,
  normal
);
@include fontface (
  " Noto Sans CJK JP " ,
  " fonts/JP/ " ,
  " NotoSansCJKjp " ,
  " Bold " ,
  700 ,
  normal
);

// @include fontface-modern(
//   "Noto Sans CJK JP",
//   "fonts/JP/",
//   "NotoSansCJKjp",
//   "Regular",
//   400,
//   normal
// );
// @include fontface-modern(
//   "Noto Sans CJK JP",
//   "fonts/JP/",
//   "NotoSansCJKjp",
//   "Bold",
//   700,
//   normal
// );

body {
  font-family : " Noto Sans " , " Noto Sans CJK JP " , sans-serif ;
}

スタイリーミックス

 // my-website/style.styl
$notosans-fontface-path = "fonts/Noto/"
@import "notosans-fontface/styl/mixins"

notosans-fontface ( "Regular" , 400 , normal )
notosans-fontface ( "Italic" , 400 , italic )
notosans-fontface ( "Bold" , 700 , normal )
notosans-fontface ( "BoldItalic" , 700 , italic )

// notosans-fontface-modern("Regular", 400, normal)
// notosans-fontface-modern("Italic", 400, italic)
// notosans-fontface-modern("Bold", 700, normal)
// notosans-fontface-modern("BoldItalic", 700, italic)

fontface(
  "Noto Sans CJK JP" ,
  "fonts/JP/" ,
  "NotoSansCJKjp" ,
  "Regular" ,
  400,
  normal
)
fontface(
  "Noto Sans CJK JP" ,
  "fonts/JP/" ,
  "NotoSansCJKjp" ,
  "Bold" ,
  700,
  normal
)

// fontface-modern(
//   "Noto Sans CJK JP",
//   "fonts/JP/",
//   "NotoSansCJKjp",
//   "Regular",
//   400,
//   normal
// )
// fontface-modern(
//   "Noto Sans CJK JP",
//   "fonts/JP/",
//   "NotoSansCJKjp",
//   "Bold",
//   700,
//   normal
// )

body {
  font-family : "Noto Sans" , "Noto Sans CJK JP" , sans-serif
}