W3.CSS Google Fonts
باستخدام W3.CSS ، من السهل جدًا إضافة خطوط جديدة.
- سهل الاستخدام للغاية (فقط CSS و HTML)
- استخدام غير محدود لمكتبات الخطوط الخارجية (مثل Google Fonts)
- يعمل في جميع المتصفحات الحديثة
هذا روبوتو
هذه صوفيا
صوفيا على النار
صنع الويب!
صنع الويب!
صنع الويب!
صنع الويب!
صنع الويب!
باستخدام خطوط جوجل
خطوط Google مجانية الاستخدام ، ولديها أكثر من 1000 خط للاختيار من بينها.
في رأس صفحة الويب الخاصة بك ، اربط بخط Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
ثم أضف CSS حول مكان استخدامه:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
مثال آخر
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
قم بإنشاء فئة الخط
في رأس صفحة الويب الخاصة بك ، اربط بخط Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
ثم قم بإنشاء فئة الخط:
مثال
.w3-sofia {
font-family: Sofia, cursive;
}
في صفحة الويب الخاصة بك ، استخدم فئة الخط:
مثال
<p class="w3-sofia">Making the Web!</p>
صنع الويب!
مثال
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
صنع الويب!
مثال
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
صنع الويب!
مثال
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
صنع الويب!
مثال
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
صنع الويب!