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

Astro Font Pant

Astro Font Picker هو تكامل شريط أدوات Dev يتيح لك تجربة خطوط مختلفة على موقعك. يستخدم خطوط Google لتحميل أكثر من 1000 خط مفتوح المصدر. استخدم مفاتيح أعلى/لأسفل للدوران بسرعة عبر خطوط مختلفة ، أو اختيار واحدة من القائمة.

الفتاة الفتاة

تثبيت

التثبيت التلقائي: 

 npx astro add astro-font-picker

التثبيت اليدوي: 

 npm install astro-font-picker

أضف ما يلي إلى ملف astro.config.mjs : 

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ;

الاستخدام

سيظهر Astro Font Picker كرمز جديد في شريط أدوات Dev ، والذي تم تمكينه افتراضيًا في Astro 4.0 وما فوق.

الفتاة الفتاة

قم بتصفية الخطوط حسب النوع (اختياري) ، ثم اختر عائلة خط. سيتم تطبيق الخط على عنصر الجسم في موقعك.

إذا كانت لديك أسر خطية تطبق على عناصر أقل من عنصر الجسم ، فلن تتجاوز تلك الخطوط إلا إذا قمت بتمكين Override All Styles .

تلميح: يمكنك استخدام مفاتيح الأسهم لأعلى/لأسفل للتنقل بسرعة عبر الخطوط.

تمكين

يتحكم هذا التبديل فيما إذا كان يتم تطبيق الخط المحدد على الصفحة. يتم تمكينه افتراضيًا.

تجاوز جميع الأنماط

سيقوم هذا التبديل بتجاوز جميع أنماط font-family على موقعك باستخدام الخط المحدد. بدون تمكين هذا ، لن يتم تجاوز أي أسر خطية يتم تطبيقها على عناصر أقل من عنصر الجسم.

السبب الرئيسي Override All Styles المعوقة هو الحفاظ على نمط الخط لعناصر أو أقسام محددة من موقعك. وبهذه الطريقة ، عندما تستخدم منتقي الخط لاختيار خط لمناطق أخرى ، لن يتجاوز الخطوط التي قررتها بالفعل.

خط الناتج CSS

هذا هو رابط ورقة الأنماط و CSS التي يمكنك نسخها ولصقها في موقعك لتثبيت الخط بشكل دائم. على سبيل المثال:

في عنصر head : 

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

في CSS الخاص بك: 

 h1 {
    font-family : Itim , cursive;
}

عرض في خطوط Google

سيفتح هذا الرابط الخط المحدد في خطوط Google.

يتم تخزين الإعدادات في تخزين الجلسة

يتم حفظ جميع الإعدادات (الممكّنة ، والتجاوز ، ونوع الخط ، وعائلة الخط) في تخزين الجلسة ، لذلك لا تضيع عند تحديث الصفحة أثناء التطوير.

آخر

يعتمد هذا المشروع على مكتبة Fontable ، وهي منتقي خط مستقل يمكن استخدامه على أي موقع ويب.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل