خطوط جوجل CSS
خطوط جوجل
إذا كنت لا تريد استخدام أي من الخطوط القياسية في HTML ، فيمكنك استخدام Google Fonts.
خطوط Google مجانية الاستخدام ، ولديها أكثر من 1000 خط للاختيار من بينها.
كيفية استخدام خطوط جوجل
ما عليك سوى إضافة رابط خاص بورقة أنماط في قسم <head> ثم الرجوع إلى الخط في CSS.
مثال
هنا ، نريد استخدام خط اسمه "Sofia" من Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
نتيجة:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
مثال
هنا ، نريد استخدام خط يسمى "Trirong" من Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
نتيجة:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
مثال
هنا ، نريد استخدام خط يسمى "Audiowide" من Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
نتيجة:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
ملاحظة: عند تحديد خط في CSS ، قم دائمًا بإدراج خط احتياطي واحد على الأقل (لتجنب السلوكيات غير المتوقعة). لذلك ، يجب عليك هنا أيضًا إضافة عائلة خطوط عامة (مثل serif أو sans-serif) إلى نهاية القائمة.
للحصول على قائمة بجميع خطوط Google المتاحة ، تفضل بزيارة برنامج How To - Google Fonts Tutorial .
استخدم خطوط Google متعددة
لاستخدام خطوط Google المتعددة ، ما عليك سوى فصل أسماء الخطوط بحرف أنبوب ( |
) ، مثل هذا:
مثال
طلب خطوط متعددة:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
نتيجة:
Audiowide Font
Sofia Font
Trirong Font
ملاحظة: قد يؤدي طلب خطوط متعددة إلى إبطاء صفحات الويب الخاصة بك! لذا كن حذرا بشأن ذلك.
تصميم خطوط جوجل
بالطبع يمكنك تصميم خطوط Google كما تريد ، باستخدام CSS!
مثال
نمط الخط "صوفيا":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
نتيجة:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
تمكين تأثيرات الخط
قامت Google أيضًا بتمكين تأثيرات الخطوط المختلفة التي يمكنك استخدامها.
أضف أولاً إلى Google API ، ثم أضف اسم فئة خاص إلى العنصر الذي سيستخدم التأثير الخاص. يبدأ اسم الفصل دائمًا بـ
وينتهي بـ .effect=effectname
font-effect-
effectname
مثال
أضف تأثير النار إلى الخط "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
نتيجة:
Sofia on Fire
لطلب تأثيرات خط متعددة ، ما عليك سوى فصل أسماء التأثيرات بحرف خط أنابيب ( |
) ، مثل هذا:
مثال
أضف تأثيرات متعددة لخط "صوفيا":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
نتيجة:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect