الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

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

مراجع الحزم الحديثة فقط ملفات الخط woff2 .

حزم

الحزم هي css جاهزة للاستخدام ، less scss و styl .

لكل حزمة ، تحتاج إلى توفير جميع ملفات الخطوط .eot و .woff2 و .woff و .ttf و .svg في الدليل المكون.

إذا كنت تستخدم ملف حزمة Less أو SCSS ، فيمكنك تجاوز متغير 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 العادية
  • Notosans مائل
  • Notosans جريئة
  • 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 العادية.

تحتوي هذه الحزمة على الخطوط التالية:

  • رقيقة Notosans
  • Notosans Thinitalic
  • Notosans extraLight
  • Notosans خارجية
  • نوتوسان الضوء
  • Notosans Lightitalic
  • Notosans العادية
  • Notosans مائل
  • Notosans المتوسطة
  • Notosans المتوسطة
  • Notosans semibold
  • notosans semibolditalic
  • Notosans جريئة
  • Notosans Bolditalic
  • Notosans vechabold
  • Notosans خارجية
  • Notosans الأسود
  • Notosans Blackitalic

الملفات المتاحة هي:

  • css/notosans-fontface-allweight.css حزمة جميع الوزن تم تجميعها إلى CSS

  • css/notosans-fontface-allweight.min.css حزمة جميع الوزن مصغرة إلى 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

  • scss/notosans-fontface-modern-allweight.scss حزمة جميع الوزن الحديثة في SCSS

  • less/notosans-fontface-modern-allweight.less حزمة جميع الوزن الحديثة في أقل

مخصص

من الممكن أن تصنع مجموعة من خطوط Noto Sans وخطوطك الخاصة أيضًا باستخدام أقل ، SCSS أو Mixens المتوفرة في هذا المشروع ،

عند استخدام mixins fontface أو notosans-fontface ، تحتاج إلى توفير جميع ملفات .eot و .woff2 و .woff و .ttf و .svg في الدليل المكون. إذا كنت تستخدم Modern Variation fontface-modern أو notosans-fontface-modern Mixins ، فأنت بحاجة فقط إلى توفير ملفات .woff2 في الدليل المكون.

حول mixins notosans-fontface أو notosans-fontface-modern ، يمكنك إعادة تعريف متغير notosans-fontface-path .

أقل mixins 

 // 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 ;
}

mixins thedlys 

 // 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
}
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل