هر طراح سایتی به خوبی می داند که چگونه باید رنگ فونت را تغییر دهد. این یکی از اولین مهارت هایی است که در طی یادگیری CSS می آموزیم. ابتدا رنگ مورد نظر را انتخاب کرده و سپس آن را در فایل استایل تنظیم می کنیم. برای مثال color: purple; . درنتیجه همه علایم در فونت مشخص شده به رنگ مورد نظر در می آید. اما اگر بخواهیم برای هر علامت در یک فونت بیش از یک رنگ انتخاب کنیم چاره چیست؟ چطور می توان برای هر حرف دو رنگ سبز و قرمز تعیین کرد؟ و یا حتی کاری کرد که حروف از رنگی آغاز شده و کم کم به رنگی دیگر درآیند؟ خوشبختانه به کمک فونت های رنگی تمام این کار ها شدنی است!

در تصویر زیر چهار فونت رنگی را می بینید.

فونت های رنگی

در نگاه اول به نظر می آید که این نوشته ها تصاویری هستند که با نرم افزار ادیتور عکس ساخته شده اند اما واقعیت این است که چیزی نیستند جز متن قابل تغییر که قابلیت خوانده شدن توسط مرورگر را دارند! این فونت ها به جای اینکه رنگشان توسط css کنترل شود, دارای تنظیمات داخلی هستند که به آن ها این اجازه را می دهد که برای هر علامت یا حرف بیش از یک رنگ انتخاب کنند. قابلیتی که جلوه بصری فوق العاده ای به صفحه می دهد!

نحوه استفاده از این فونت ها

فونت های رنگی مدت زمان زیادی از ظهورشان نمی گذرد بنابراین طبیعی است که تعداد زیادی از این فونت ها منتشر نشده باشد, در این میان بعضی از آن ها رایگان و تعدادی نیز خریدنی هستند. در لینک های زیر ما چهار فونت تصویر بالا که خوشبختانه رایگان هم هستند را برای شما قرار می دهیم, به راحتی به آدرس مورد نظر رفته و یک کپی از فونت دلخواهتان بگیرید و از آن استفاده کنید.

.Gilbert on typewithpride.com

.Abalone on colorfontweek.fontself.com

.Playbox on colorfontweek.fontself.com

.Bixa on bixacolor.com

کدی که برای اضافه کردن این فونت ها به صفحه لازم است چیز جدیدی نیست , در واقع همان fontface@ آشنا و ساده است.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Color Fonts</title>

    <style>

    @font-face {

        font-family: ‘Gilbert’;

        src: url(‘fonts/Gilbert-Color Bold-Preview_1004.otf’);

    }

    @font-face {

        font-family: ‘Abalone’;

        src: url(‘fonts/Abelone-FREE.otf’);

    }

    @font-face {

        font-family: ‘Playbox’;

        src: url(‘fonts/Playbox-FREE.otf’);

    }

    @font-face {

        font-family: ‘Bixa’;

        src: url(‘fonts/NTBixa-Color.woff2’);

    }

    body {

        font-size: 4.5rem;

        line-height: 1.618;

    }

    .gilbert {

        font-family: ‘Gilbert’;

    }

    .abalone {

        font-family: ‘Abalone’;

        font-size: 3.8rem;

    }

    .playbox {

        font-family: ‘Playbox’;

    }

    .bixa {

        font-family: ‘Bixa’;

    }

    </style>

</head>

<body>

        <a class=”gilbert”>Gilbert Color Font</a>

        <div class=”abalone”>Abalone Color Font</div>

        <div class=”playbox”>Playbox Color Font</div>

        <div class=”bixa”>Bixa Color Font</div>

</body>

</html>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

چه مرورگر هایی از این فونت ها پشتیبانی می کنند؟

در حال حاضر, اگر می خواهید از این فونت ها استفاده کنید باید از مرورگر های firefox و edge استفاده کنید, تنها مرورگر هایی که به طور کامل از این فونت ها پشتیبانی می کنند. مرورگر سافاری فقط از فرمت SBIX پشتیبانی می کند. کروم فقط در اندروید و آن هم فقط از فرمت CBDT پشتیبانی می کند. اوپرا اما از هیچ یک از فرمت ها پشتیبانی نمی کند!

تغییرات در CSS

در حال حاضر برای تغییر رنگ هایی که در فونت های رنگی استفاده می شوند نمی توان از CSS استفاده کرد. با این حال برای یک طراح فونت این امکان وجود دارد که بسته فونت خود را به قابلیت تغییر پذیری از پیش تعریف شده تجهیز کند. این تغییر پذیری با استفاده از ویژگی font-feature-settings قابل اجرا است.

از آن جایی که رنگ های فونت های رنگی در داخل آنها تنظیم شده است, دستور color:……; دیگر قابل استفاده نیست. حتی برای رنگ دادن به لینک ها, هدر ها و یا هر چیز دیگری که با فونت رنگی ایجاد شود. البته خوب است بدانید که با اینکه تنظیم رنگ برای لینک ها غیر ممکن است, همچنان می توان از خط کشی زیر آن ها استفاده کرد و در فایل CSS رنگ این خط کشی قابل تغییر است. اگر قصد دارید از فونت رنگی برای لینک ها استفاده کنید بهتر است ازین خط کشی استفاده کنید تا عبارت لینک از متنتان قابل تشخیص باشد. برای مثال نگاهی به کد زیر بیاندازید.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Color Fonts</title>

    <style>

    @font-face {

        font-family: ‘Gilbert’;

        src: url(‘fonts/Gilbert-Color Bold-Preview_1004.otf’);

    }

    body {

        font-size: 4.5rem;

        line-height: 1.618;

    }

    .gilbert {

        font-family: ‘Gilbert’;

    }

    a {

        color: red;

    }

</head>

<body>

        <div class=”gilbert”>Gilbert Color <a href=”#”>Link</a></div>

</body>

</html>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

کد بالا به ما عبارت link را به صورت خط گذاری شده نشان می دهد.

فونت های رنگی

با ارائه ابزار هایی چون فونت های رنگی و فونت های متغیر,  به نظر می آید که پیشرفت های جدید برای ایجاد تنوع پذیری در طراحی صفحه ها, نمایش فونت ها را بسیار هیجان انگیز تر و زیباتر از قبل کرده باشد و این یعنی آینده ای روشن برای طراحی وبسایت.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *