فونت‌های وب در CSS

درک بهتر فونت‌های وب با CSS

استفاده از فونت‌های وب در CSS به شما این امکان را می‌دهد که در طراحی سایت‌هایتان از فونت‌های متنوع و جذاب‌تر استفاده کنید. این قابلیت به طراحان اجازه می‌دهد که فونت‌های سفارشی را برای صفحات وب خود استفاده کنند، تا تجربه کاربران را جذاب‌تر و متفاوت‌تر کنند. استفاده از فونت‌های وب به شما این امکان را می‌دهد که در هر مرورگر و دستگاهی، نوع خاصی از حروف را به نمایش بگذارید.

یکی از روش‌های متداول برای استفاده از فونت‌های وب، استفاده از سرویس‌هایی مانند Google Fonts است که کتابخانه‌ای جامع از فونت‌های مختلف را به سازندگان وب ارائه می‌دهد. این سرویس‌ها اغلب به صورت رایگان عرضه می‌شوند و تنها با چند خط کد می‌توانید فونت‌های جدیدتان را در پروژه‌هایتان به کار ببرید.

در گذشته، استفاده از فونت‌های وب به دلیل محدودیت‌های فنی و مرورگری، چالش‌هایی داشت. اما با پیشرفت تکنولوژی و پشتیبانی بهتر مرورگرها، اکنون می‌توانید به راحتی و با اعتماد بیشتر از این ویژگی بهره ببرید.

در این مقاله، نگاهی به نحوه استفاده از فونت‌های وب در CSS و چگونگی ادغام آنها در پروژه‌های واقعی خواهیم داشت. این به شما کمک می‌کند تا پروژه‌های خود را با ظاهری منحصربه‌فرد و حرفه‌ای ارائه دهید.

چگونه فونت‌های وب را با CSS بارگذاری کنیم؟

برای استفاده از فونت‌های وب، ابتدا باید بدانید چگونه فونت را به پروژه خود وارد کنید. روش متداول دیگر این است که از CSS برای آوردن فونت‌ها از منابع خارجی مانند Google Fonts استفاده کنید.

مثال کد: استفاده از فونت‌های وب

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>
<!-- body content goes here -->

تحلیل هر خط کد:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
این خط شامل یک لینک HTML است که فونت Roboto را از Google Fonts بارگذاری می‌کند. این لینک به مرورگر می‌گوید که فونت را از کجا دریافت کند.

<style>
این خط نشان دهنده شروع بخش CSS داخلی است که سپس ویژگی‌های مختلف CSS را تعریف می‌کند.

body { font-family: 'Roboto', sans-serif; }
این بخش CSS است که فونت Roboto را به عنوان فونت برای همه عناصر body تعریف می‌کند. به این ترتیب، تمامی متون در این بخش با فونت Roboto نمایش داده می‌شوند و در صورت عدم دسترسی، مرورگر به فونت sans-serif پیش‌فرض برمی‌گردد.

</style>
این خط نشانگر پایان بخش CSS است.