هر طراح وب می داند چگونه رنگ فونت را تنظیم کند، درست است؟ این یکی از اولین مواردی است که ما در هنگام یادگیری CSS شروع میکنیم. رنگی را انتخاب میکنیم، سپس از سبکها برای تنظیم آن استفاده میکنیم، مانند color: blue; یا color: purple; ؛ بنابراین تمام گلهای در فونت انتخاب شده ما این رنگ را رنگ می کنند و تنها آن رنگ.
اما اگر شما می توانید بیش از یک رنگ در هر گلیف تعریف کنید؟ اگر شما می توانید حروف خود را آبی و بنفش داشته باشید یا دارای شیب هایی بین آبی و بنفش هستید یا حتی یک یا دو ده رنگ یا بیشتر برای یک خانواده فونت استفاده کنید؟
خوب، با ظهور فونت های رنگی باز، شما می توانید فقط آن را انجام دهید.
این تصویر از چهار فونت مختلف رنگ را بررسی کنید:
این ممکن است به نظر می رسد که تصاویر ثابت در Illustrator قرار داده شده است، اما شما در واقع به دنبال متن قابل خواندن، قابل ویرایش، قابل جستجو در مرورگر هستید.
به جای اینکه رنگ آنها را از طریق CSS کنترل کند، این فونتها اطلاعات داخلی دارند که به آنها اجازه می دهد رنگ های مختلف را در یک گلیف داشته باشند و برای نمایش بسیار قابل توجه باشند.
فونت های رنگی هنوز کاملا جدید هستند، بنابراین تعداد زیادی از آنها هنوز منتشر نشده است، و در میان آنهایی که در دسترس هستند، ترکیبی از فونت های رایگان و پرداخت می شود. برای اطمینان از اینکه میتوانید با فونتهای رنگی خودتان بازی کنید، من چهار فونت رایگان را برای نسخه ی نمایشی خود انتخاب کردیم. شما می توانید نسخه های این فونت ها را در مکان های زیر دریافت کنید:
کد مورد استفاده برای اضافه کردن آنها به صفحه، چیزی جدید نیست، فقط عنصر قدیمی @ font-face شما می دانید و دوست دارید:
<!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>
در این لحظه در زمان، اگر می خواهید فونت رنگی را در مرورگر امتحان کنید، باید از فایرفاکس یا لبه، تنها دو مرورگر با پشتیبانی کامل استفاده کنید. پشتیبانی از Safari تنها به قالب SBIX پشتیبانی می کند. Chrome تنها در اندروید پشتیبانی می کند، و فقط برای فرمت CBDT. اپرا هیچ پشتیبانی ندارد.
در حال حاضر ما نمی توانیم CSS را برای تغییر رنگ هایی که در فونت رنگ استفاده می شود استفاده کنیم. با این حال، برای یک طراح فونت ممکن است یک فونت را با تعدادی از تغییرات از پیش تعیین شده شامل شود. سپس این تغییرات می تواند با استفاده از font-feature-settings تغییر کند.
همانطور که رنگ یک فونت رنگی درون فونت خود ثابت می شود، اموال رنگی که شما معمولا به متن خود اعمال می کنید، هیچ تاثیری نخواهید داشت، از جمله در لینک ها، هر چه که دولت آنها باشد.
همچنین لازم به ذکر است که در حالی که تغییر رنگ با لینک ها رخ نمی دهد، آنها هنوز هم می توانند دکوراسیون متن زیر را به طور پیش فرض خود اعمال کرده و خط زیر هر رنگی را که توسط 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>
این به ما یادآوری قرمز که در آخرین کلمه دیده می شود را می دهد:
بین فونت های رنگی و فونت های متغیر، جدیدترین پیشرفت های Open Type به نظر می رسد فونت ها را در مرورگر بسیار سرگرم کننده تر و جالب تر می کنند. آینده تایپوگرافی طراحی وب به نظر می رسد روشن است!
