ایجاد: ۸:۲۸ ۱۳۹۱/۶/۴
ویرایش: ۹:۴۸ ۱۳۹۵/۴/۲۹

یادداشت‌ها

»

استفاده از فونت دلخواه در صفحات وب

فونت‌های استانداردی که بر روی همه سیستم‌عامل ویندوز و مکینتاش وجود داشته باشند، بسیار اندک هستند. لیستی از آنها در CSS font stack قرار داده شده است.
در براوزرهای مدرن که اکثر کاربران از آن استفاده می‌کنند، به سادگی می‌توان فونت دلخواه را با تکنیک‌های جدید، به صفحه وب افزود. گوگل صدها فونت را برای طراحان در Google Web Fonts آماده کرده است و اخیرا هم چندین فونت فارسی/عربی نیز قرار داده است.

یکی از سختی‌های این کار، تهیه نسخه‌ها و فرمت‌های مختلف یک فونت است. یعنی علاوه بر ttf لازم است که همان فونت خاص با پسوندهای svg, eot, ... نیز تهیه شود. در این لینک این کار بر روی 40 فونت فارسی انجام شده و همچنین روش افزودن آن به css صفحه نیز آموزش داده شده است.

یکی دیگر از مشکلات استفاده از فونت‌های تحت وب این است که در برخی براوزرها (مثل فایرفاکس) قبل از لود فونت، تا چند ثانیه متن ناپدید می‌شود که این چشمک (blink) برای کاربر مطلوب نیست. جناب Paul Irish در انتهای این مطلب برای رفع این نقیصه، استفاده از لود کننده فونت گوگل را توصیه کرده و نمونه کد مربوطه را نیز آورده است.

یکی دیگر از مسائلی که وجود دارد، کش نشدن فونت در سیستم کاربر است که دو راه برای آن پیشنهاد می‌شود. راه اول استفاده از localStorage که در این مقاله به سادگی و در این مقاله به تفصیل توضیح داده شده است و این سرویس عالی نیز این امر را تسهیل کرده است. راه دوم تبدیل فونت به base64 برای استفاده inline و ذخیره آن در css است که این راه علاوه بر حل مشکل کش‌شدن فونت، مشکل چشمک (blink) که در پاراگراف قبل گفتیم را نیز حل می‌کند.

مشکل دیگر، مربوط به درخواست اضافی و زاید براوزر IE و ... است که این مشکل را نیز جناب پاول ایریش اینگونه حل کرده است:

@font-face {
  font-family: 'myFont';
  src: url('myFont.eot?') format('eot'), url('myFont.woff') format('woff'), url('myFont.ttf') format('truetype');
}
وی توضیح داده که چرا این تکنیک، از سایر روش‌ها (از جمله روش اسمایلی) بهتر است.

مقاله آنچه طراحان وب باید از فونت بدانند نیز توضیحات خوبی در این زمینه آورده است.

این مطلب و این مقاله نیز لیست فرمت‌های قابل پشتیبانی در هر مرورگر را آورده‌اند و توضیحاتی نیز در این خصوص ارائه داده‌اند.

به صورت خلاصه می‌توان گفت که با داشتن فرمت‌های ttf و eot می‌توان اغلب براوزرها را پوشش داد. با افزودن فرمت svg این پوشش کامل می‌شود هرچند فرمت جدید woff نیز محاسن خود را دارد.

این مطلب و این مطلب نیز نکات خوبی در این زمینه دارد.

نکته: اگر از فونت موجود در یک سایت خوشتان بیاید، با کمک firebug یا سایر سرویس‌ها و افزونه‌های مشابه، می‌توان به سادگی نام فونت استفاده شده را کشف کرد. اما اگر فونت موردنظر شما، در یک تصویر موجود بود، با آپلود آن تصویر در سایت whatfontis.com می‌توانید به سادگی نام آن فونت را کشف کنید.
همچنین برای انتخاب یک فونت با مشخصات خاص، سرویس typekit که متعلق به Adobe است، می‌تواند شما را در یافتن فونت‌های منطبق بر خواست شما یاری کند...

آیا تبدیل آیکون‌ها و شکلک‌ها به فونت کار صحیحی است؟

فونت برداری است و در سایزهای مختلف، کیفیت خود را حفظ می‌کند به همین دلیل برخی از طراحان علاقه دارند از آن برای icon ها و ... استفاده کنند اما با وجود SVG و مزایای آن نسبت به فونت (و معایب متعدد فونت در مقابل SVG) استفاده از فونت در این موارد کار معقولی نیست که در این خصوص مقالاتی در وب هست از جمله این موارد:

که در مورد SVG ها مطلب مبسوطی قبلا نوشتم.

برای متن عادی، چه سایز فونتی را انتخاب کنیم؟

نمی‌توان یک عدد را به عنوان فونت‌سایز استاندارد برای همه‌جا و همه فونت‌ها معرفی کرد. اما از نظر ظاهری حسب تحقیقات بهتر این است که سایز فونت را طوری تنظیم کنید که همواره در هر خط بین 45~75 (متوسط 60) کاراکتر قرار گیرد. این امر خصوصا در مواردی که ساختار شناور (fluid layout) برای سایت خود انتخاب کرده باشید، مهم‌تر است.

مشکل لبه‌ی زبر برخی فونت‌ها در برخی مرورگرها

اگر متوجه این مشکل نشده‌اید، این مطلب را ببینید. بخشی از این مشکل به تبدیل غیراستاندارد یک فونت برمی‌گردد. بسیاری از اوقات یک فونت در اصل به فرمت ttf است و با استفاده از مبدل به سایر فرمت‌ها تبدیل می‌شود. اگر این مبدل غیراستاندارد باشد، می‌تواند منجر به مشکلاتی در نمایش کم‌کیفیت آن گردد.
بخشی از این مشکل را در برخی از مرورگرها با کد css ساده زیر می‌توان مرتفع کرد:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

روش‌های مختلف لود فونت، مزایا و معایب هر یک آز آنها

روش‌های متعددی برای لود فونت و افزودن آن به صفحه وجود دارد که هر یک آز آنها مزایا و معایبی دارد. در مطلب جدید و جامع زیر، این روش‌ها با هم مقایسه شده‌اند:
A Comprehensive Guide to Font Loading Strategies
یادداشت‌های مرتبط
  1. گرافیک برداری
  2. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
  3. نمودارها در صفحات وب
  4. انیمیشن با CSS
  5. حذف درخواست اضافه تصویر انیمیشن لودینگ
  6. ادیتورهای محتوای غنی‌شده برای صفحات وب
  7. روش‌ها و تکنیک‌های پنهان کردن ایمیل
  8. کشف فونت‌های نصب شده در کلاینت
  9. کار با تصاویر در سمت کاربر
  10. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
  11. بهینه سازی آنلاین سی‌اس‌اس و جاوا اسکریپت
  12. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
  13. نکات و ترفندهایی برای قالب‌دهی به نمای چاپ صفحات وب

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: