استفاده از اپن تایپ برای متن

در این مقاله قصد داریم ترفندها و نکاتی را در مورد استفاده از اپن تایپ بیان کنیم. پس همراه وب ایده باشید.

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

 از سرویس ها و خدمات پرمیوم برای فونت های خود استفاده کنید:

با استفاده از دستورات CSS می توانیم نوع فونتی که در سایت نمایش داده می شود را تعیین کنیم. چنین موضوعی می تواند باعث ایجاد مشکل در  کار طراحان شود. اگر کاربری فونت مورد نظر را در سیستم خود نداشته باشد چه اتفاقی می افتد؟  در چنین شرایطی معمولا  فونت هایی نمایش داده می شود که بر روی سیستم کاربر نصب شده است. برای حل چنین مشکلاتی می توانیم از دستور @font-face   استفاده کنیم. با استفاده از این دستور قادر خواهیم بود هر نوع فونتی را در پروژه خود بارگذاری کنیم. شما می توانید از خدماتی همچون گوگل فونت استفاده  کنید یا اینکه  فونت مد نظر خود را  با استفاده از تولید کننده فونتی همچون Font Squirel ایجاد نمایید. هر دوی این سرویس ها حجم وسیعی از فونت های رایگان و عالی را در اختیار شما قرار می دهد اما شما می توانید فونت های پرمیوم  و حرفه ای تر نیز داشته باشید. اگر دوست دارید از فونت های بهتر و زیباتری بهره ببرید می توانید از سرویس هایی همچون Adobe Typekit یا Fonts.com استفاده کنید. این سرویس ها نه تنها فونت های با کیفیتی فراهم می کنند بلکه قادرند قابلیت خواندن، تحویل و عملکرد بارگذاری فونت ها را بهبود ببخشند. بیشتر افراد از Adobe Typekit برای تحویل و ارائه فونت ها در پروژه های مشتریان خود استفاده می کنند و از آن راضی هستند.  تنها مشکلی که برخی از مشتریان با آن مواجه هستند این است که امکان دانلود همه فونت ها و ذخیره سازی محلی آن کمی دشوار است. اما باید به خاطر داشته باشید که یکی از مزیت های بزرگ آن، این است که تعدادی فونت با قابلیت Opentype فراهم می کند.  داشتن فونت هایی که از قابلیت اپن تایپ(Opentype) پشتیبانی می کند اولین قدم برای به دست آوردن یک متن خوب و خواناست.

ligatures را فعال کنید:

همانطور که می دانید ligatures قابلیتی در اپن تایپ است که  توالی رایجی از کاراکترهای متعدد را با یک کاراکتر واحد جایگزین می کند تا بتواند خوانایی متن را بهبود ببخشد و ظاهر بصری آن را بهتر کند. این گزینه هنگام ترکیب بعضی از کلمات خاص، دو کلمه را به هم طوری متصل می کند که حرف ـی چسبان آخر به نقاط و یا حروف دیگر نچسبد.برای اینکه بتوانید از ligature در CSS بهره ببرید،  می توانید از اسنیپت زیر استفاده کنید:

body {

 font-variant-ligatures: common-ligatures;

 font-feature-settings: “liga”, “clig”; /* for IE */

}

اگر از سفری استفاده می کنید ligature ها به صورت پیش فرض فعال هستند  اما اگر از فایرفاکس ، کروم یا IE استفاده می کنید باید مطمئن شوید که این گزینه را به خوبی تنظیم می کنید.

از Swash استفاده کنید:

اگر بر روی پروژه ای کار می کنید که نیازمند زیبایی ظاهری بیشتری است، می توانید از swash استفاده کنید. این قابلیت می تواند هر نوع  کاراکتری که در متن شما وجود دارد را بگیرد و سپس آن را با حروف Swash جایگزین نماید. این حروف دقیقا همان حروفی هستند که قبلا مورد استفاده قرار می دادید اما کمی  عجیب ترند. برای اینکه بتوانید از این قابلیت به خوبی استفاده کنید بهتر است از اسنیپت زیر استفاده کنید. این اسنیپت می تواند قابلیت swash را فعال نماید.

.fancy-title {

 font-feature-settings: “swsh”;

}

با استفاده از kerning فاصله بین حروف را بهبود ببخشید:

شما می توانید از قابلیت های مختلف ورد برای نوشتن متن استفاده کنید. این نرم افزار به شما اجازه می دهد فاصله بین حروف و کلمات را کنترل کنید. اما برای کنترل بیشتر و خوانایی بهتر می توانید از قابلیت font-kerning اپن تایپ استفاده کنید. همانطور که می دانید Kerning فرایندی است که در آن فاصله بین ترکیب خاصی از کاراکترها تنظیم می شود . بنابراین خواندن چنین متن هایی برای افراد راحت تر و آسان تر خواهد بود. این قابلیت را می توان با تعیین font-kerning یا font-feature-settings تنظیم کرد. به دستور زیر توجه کنید:

body {

 font-kerning: normal;

 font-feature-settings: “kern”;

}

تنظیم همزمان قابلیت های متعدد اپن تایپ :

 خوب همانطور که مشاهده کردید سه مورد از مهم ترین و رایج ترین قابلیت های موجود در اپن تایپ را با هم مرور کردیم. اما باید به خاطر داشته باشید که قابلیت های زیادی در آن وجود دارد. اگر می خواهید قابلیت های قدرتمندی را مورد استفاده قرار دهید، بهتر است همه آن ها را به صورت همزمان تنظیم کنید. می توان اینکار را با استفاده از font-variant یا font-feature-settings انجام داد. معمولا به خاطر مشکلات پشتیبانی که در مرورگرها وجود دارد از این دو گزینه صحبت می کنیم. به عنوان مثال IE10  از  ویژگی هایی همچون font-feature-settings پشتیبانی می کند اما از سایر موارد همچون font-kerning یا font-variant پشتیبانی نمی کند. سفری نیز از ویژگی های فردی همچون font-kerning پشتیبانی نمی کند اما می تواند قابلیت هایی همچون font-feature-settings را تشخیص دهد. بنابراین برای فعال کردن همه قابلیت هایی که در مورد آن ها صحبت کردیم باید از دستورات زیر استفاده کنید:

body {

 font-variant: common-ligatures;

 font-kerning: “kern”;

 font-feature-settings: “liga”, “clig”, “swsh”, “kern”;

}

تجربه خود را بهتر کنید:

اگر احساس می کنید تمامی موارد بیان شده در این مقاله طولانی است و زمان کافی برای انجام آن را ندارید می توانید کار دیگری انجام دهید. به احتمال زیاد با  normalize.css آشنا هستید . همانطور که می دانید این گزینه  یک فایل CSS کوچک هست که می تواند مقدار اکثر تگ های HTML را برای نمایش صحیح و یکسان در همه مرورگرها مشخص کند. شما می توانید از  normalise-opentype.css استفاده کنید که قابلیت های اپن تایپ را با تمام خواص و ویژگی های مورد نیاز اضافه می کند. پروژه normalise-opentype.css بر روی github قرار دارد و استفاده از آن به آسانی دانلود و لینک دادن به یک استایل شیت اضافی  است.