หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

Noto Sans Font Face

แพ็คเกจง่ายๆที่ให้หน้าอักษรของ Noto Sans

ฟอนต์มีอยู่ใน .eot , .woff2 , .woff , .ttf และ .svg เพื่อให้สอดคล้องกับเบราว์เซอร์ทั้งหมด (จาก IE6/Old-ios ไปจนถึงเบราว์เซอร์สมัยใหม่)

ข้อกำหนดเบื้องต้น

  • 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

แพ็คเกจที่ทันสมัยอ้างอิงเฉพาะไฟล์ FONT woff2

แพ็คเกจ

แพ็คเกจเป็น css ที่พร้อมใช้ less scss และไฟล์ styl

สำหรับแต่ละแพ็คเกจคุณจะต้องจัดเตรียมไฟล์ .eot , .woff2 , .woff , .ttf และ .svg ตัวอักษรในไดเรกทอรีที่กำหนดค่า

หากคุณใช้ไฟล์แพ็คเกจที่น้อยกว่าหรือ SCSS คุณสามารถแทนที่ตัวแปร notosans-fontface-path ก่อนที่จะนำเข้า notosans-fontface ตัวแปรนี้กำหนดค่าไดเรกทอรีที่เก็บฟอนต์ค่าเริ่มต้นคือ ../fonts 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 ปกติ
  • Notosans ตัวเอียง
  • notosans หนา
  • notosans bolditalic

ไฟล์ที่มีอยู่คือ:

  • css/notosans-fontface.css - แพ็คเกจที่จำเป็นที่รวบรวมไว้กับ CSS
  • css/notosans-fontface.min.css - แพ็คเกจที่จำเป็น minified to css
  • scss/notosans-fontface.scss - แพ็คเกจที่จำเป็นใน SCSS
  • less/notosans-fontface.less - แพ็คเกจที่จำเป็นในน้อยกว่า

นอกจากนี้ยังมีการเปลี่ยนแปลงที่ทันสมัยที่อ้างอิงเฉพาะไฟล์ FONT woff2 :

  • css/notosans-fontface-modern.css แพ็คเกจสำคัญที่ทันสมัยรวบรวมกับ CSS
  • css/notosans-fontface-modern.min.css แพ็คเกจสำคัญที่ทันสมัย ​​minified to css
  • scss/notosans-fontface-modern.scss แพ็คเกจสำคัญที่ทันสมัยใน SCSS
  • less/notosans-fontface-modern.less แพ็คเกจสำคัญที่ทันสมัยในน้อยลง

แพ็คเกจทั้งหมดน้ำหนัก

แพ็คเกจ "น้ำหนักทั้งหมด" มีฟอนต์ Noto Sans ปกติทั้งหมด

แพ็คเกจนี้มีแบบอักษรต่อไปนี้:

  • notosans ผอม
  • notosans thinitalic
  • Notosans ภายนอก
  • notosans extralightitalic
  • Notosans Light
  • notosans lightitalic
  • notosans ปกติ
  • Notosans ตัวเอียง
  • Notosans Medium
  • notosans mediumitalic
  • semibold notosans
  • notosans semibolditalic
  • notosans หนา
  • notosans bolditalic
  • notosans extrabold
  • notosans extrabolditalic
  • notosans สีดำ
  • notosans blackitalic

ไฟล์ที่มีอยู่คือ:

  • css/notosans-fontface-allweight.css แพ็คเกจทั้งหมดน้ำหนักที่รวบรวมกับ CSS

  • css/notosans-fontface-allweight.min.css แพ็คเกจน้ำหนักทั้งหมด minified ถึง CSS

  • scss/notosans-fontface-allweight.scss แพ็คเกจ All-Weight ใน SCSS

  • less/notosans-fontface-allweight.less แพ็คเกจ All-Weight ในน้อยลง

  • นอกจากนี้ยังมีการเปลี่ยนแปลงที่ทันสมัยที่อ้างอิงเฉพาะไฟล์ FONT woff2 :

  • css/notosans-fontface-modern-allweight.css แพ็คเกจ All-Weight ที่ทันสมัยรวบรวมกับ CSS

  • css/notosans-fontface-modern-allweight.min.css แพ็คเกจ All-Weight ที่ทันสมัย

  • scss/notosans-fontface-modern-allweight.scss แพ็คเกจ All-Weight ที่ทันสมัยใน SCSS

  • less/notosans-fontface-modern-allweight.less แพ็คเกจ All-Weight ที่ทันสมัยในเวลาน้อย

กำหนดเอง

เป็นไปได้ที่จะสร้างชุดฟอนต์ Noto Sans ของคุณเองและแบบอักษรของคุณเองเช่นกันโดยใช้ SCSS หรือ Stylus Mixins ที่น้อยลงในโครงการนี้

เมื่อคุณใช้ Mixins fontface หรือ notosans-fontface คุณจะต้องจัดเตรียมไฟล์ .eot , .woff2 , .woff , .ttf และ .svg ทั้งหมดในไดเรกทอรีที่กำหนดค่า หากคุณใช้รูปแบบการเปลี่ยนแปลงที่ทันสมัย fontface-modern หรือ notosans-fontface-modern Mixins คุณจะต้องระบุไฟล์ .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 Mixins 

 // 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
}
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด