آموزش استفاده از فونت های گوگل در CSS
اگر نمی خواهید از فونت های استاندارد در HTML استفاده کنید، می توانید از فونت های گوگل استفاده کنید. استفاده از فونت های گوگل رایگان است و می توانید یک فونت را از بیش از 1000 فونت گوگل انتخاب کنید.
چگونه از فونت های گوگل استفاده کنیم؟
فقط کافی است که لینک یک برگه ی استایل(style sheet) را در بخش <head> از سایت خود قرار دهید و آنگاه در CSS، فونت خود را مشخص کنید.
مثال شماره 1
در اینجا، می خواهیم از یک فونت به نام Sofia در فونت های گوگل استفاده کنیم:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>مثال شماره 2
در این مثال، می خواهیم از یک فونت به نام Trirong در فونت های گوگل استفاده کنیم:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>مثال شماره 3
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head> نکته: وقتی که دارید یک فونت را در CSS مشخص می کنید، همواره حداقل یک فونت بازگشتی(پشتیبان) را مورد استفاده قرار دهید (تا از اتفاقات ناخواسته اجتناب شود). بنابراین، حتی در این، شما باید یک خانواده ی فونت عمومی(generic) را به انتهای لیست فونت خود اضافه کنید.
برای مشاهده ی یک لیست از تمام فونت های گوگل، می توانید به این مقاله مراجعه کنید.
استفاده از چند فونت گوگل
برای استفاده از چند فونت گوگل، ابتدا نام فونت ها را با استفاده از کاراکتر pipe (یعنی |) مانند زیر از هم جدا کنید:
مثال شماره 4
<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>نکته: درخواست چند فونت از گوگل، ممکن است سرعت لود صفحات وب شما را کاهش دهد. بنابراین در انجام این کار دقت کنید.
استایل دهی به فونت های گوگل
ما حتی می توانیم فونت های گوگل را با استفاده از CSS به دلخواه خود استایل دهی کنیم.
مثال شماره 5
استایل دهی به فونت Sofia :
<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>
فعال کردن افکت های فونت گوگل
گوگل، افکت های مختلفی را برای فونت های خود فعال کرده است که می توانیم از آنها استفاده کنیم. ابتدا عبارت effect=effectname را در API گوگل اضافه کنید. سپس یک نام کلاس خاص را به عنصری که قرار است افکت خاص را مورد استفاده قرار دهد، اضافه کنید. نام کلاس مذکور با عبارت font-effect- شروع می شود و با مقدار effectname خاتمه می یابد.
مثال شماره 6
اضافه کردن افکت آتش به فونت 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>برای درخواست چند افکت فونت، فقط کافیست نام افکت ها را با استفاده از علامت | از هم جدا کنید، مانند زیر:
مثال شماره 7
اضافه کردن چند افکت به فونت Sofia:
<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>
- بازدید: 224
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.