دسته بندی
-
آنچه طراحان وب باید از فونت بدانند
-
اگر مروری بر صنعت چاپ داشته باشیم، اولین دستگاههای چاپ قادر بودند کلمات لاتین را با استفاده از حروف سربی بر روی کاغذ حک کنند. با ورود به عصر کامپیوتر، به ابزار مشابهی جهت نمایش اطلاعات در این دنیا نیاز بود، این نیازها منجر به پیدایش فونت شد. در واقع فونت ابزاری جهت نمایش اطلاعات در دنیای دیجیتال است.
-
00
-
بازدید این صفحه : ۴۶۳۹تاريخ : 21 خرداد 1393
آنچه طراحان وب باید از فونت بدانند
یک فونت از قسمتهای مختلفی تشکیل شده است. که عبارت است از کاراکتر ها، حروف و سمبلهایی هستند که در یک فونت وجود دارند. از طرفی دیگر یک کاراکتر دارای حالات مختلفی است، برای مثال کاراکتر ب از حالات ب – بـ – ـبـ – ـب تشکیل شده است، این حالات مختلف یک کاراکتر را گلیف میگویند. ابزاری به نام موتور رندر متن با توجه به مشخصات هر کاراکتر نسبت به کاراکترهای بعد و قبل از آن یکی از حالات مختلف گلیف مورد نظر را شناسایی کرده و بر روی خروجی ترسیم میکند.
اما نکته مهمی که باید به آن توجه داشت این است که هر گلیف دارای کد متفاوتی است که به آن کد پوینت گفته میشود. در سالهای آغازین دنیای کامپیوتر، تمامی مراودات انجام شده با کامپیوتر با استفاده از زبان انگلیسی و یکسری سمبلهای خاص انجام میشد. این دسته از حروف در استانداردی با نام اسکی گنجانده شدند.
با فراگیرتر شدن کامپیوترها در نیمه دوم دهه ۹۰ میلادی، نیاز بود تا زبانهای بیشتری به دنیای دیجیتال وارد شود. به همین دلیل تولیدکنندگان کامپیوتر اقدام به ایجاد استاندادرهای مختلف کردند که هر استاندارد حاوی کاراکترها و سمبلهایم ورد نیاز یک یا چند زبان با ریشه مشترک بود. به این صفحات کدپیج گفته میشد. متاسفانه وجود کدهای برابر و یکسان در کدپیجهای مختلف باعث سردرگمی کاربران شده بود. برای مثال شخصی با استفاده از کدپیج زبان آلمانی یک متن را مینوشت و دیگری بدون اینکه اطلاعی از کدپیج نگارنده داشته باشد، با استفاده از کدپیج روسی اقدام به مطالعه متن میکرد. نتیجه آنکه متنی که کاربر نهایی مطالعه میکرد حاوی یکسری کاراکتر و سمبل زبان روسی بود که هیچ ارتباطی با متن نوشته شده به زبان آلمانی نداشت. با ازدیاد این مشکلات کنسرسیومی به نام یونیکد اقدام به وضع استانداردی کرد که با نام خود این کنسرسیوم به نام یونیکد شناخته میشود.
یونیکد، حاوی اطلاعات مربوط به کاراکترها و سمبلهای تمامی زبانهای زنده و مرده دنیاست. این استاندارد با مشخص کردن جداول متفاوت، زبانهای با ریشه مشترک را مانند زبان عربی، فارسی، فارسی دری، اردو و غیره را در یک جدول جای داده و تمامی اطلاعات مورد نیاز آنها را شامل می شود . بدون اینکه کد مورد استفاده در یک گلیف، در گلیف دیگری در هر زبان دنیا استفاده شده باشد.
در سالهای ابتدایی دنیای وب، قراردادن اطلاعات در وب از اهمیت بسزایی برخوردار بود. هر زبانی، مهمترین آثارش را در وب ثبت میکرد تا به دست دیگران برساند. لیکن بدلیل محدودیتهای ابتدایی، صرف قراردادن اطلاعات در وب ، نگارنده و خواننده را راضی نگاه میداشت. با پیشرفتهایی که در طول سالهایی اندک صورت پذیرفت، این قابلیت ایجاد شد که صفحات بصورت زیباتری به نظر خواننده برسد.
طراحان وب، با استفاده از تصاویری با پیشزمینه شفاف به خلق متون با کیفیت و زیبا پرداختند و همین امر باعث بوجود آمدن موج دوم نمایش اطلاعات در وب شد. نهایتا با توجه به نیاز کاربران برای نمایش متون زیباتر در وب شرکتهای مختلف اقدام به وضع استانداردهای داخلی کردند تا با رعایت آنها، مطالب با شکل زیباتری به نظر بیننده برسد. اما قدم آخر، استاندارد یکسانی بود که برای رعایت در تمامی مرورگرهای وب پیشنهاد شد. وب فونت ؛ گرچه از سال ۲۰۰۹ میلادی هنوز به عنوان یک پیشنهاد باقی مانده، لیکن بدلیل پشتیبانی بسیار خوب تبدیل به تنها روشی شده که طراحان وب از آن برای خلق متون زیباتر بهره ببرند.
در سالهای ابتدایی وب، طراحان وب برای نمایش متون مورد نظر از فونتهای استاندارد استفاده میکردند. برای زبان فارسی، عموم وبسایتها از فونت Tahoma استفاده میکردند
در سالهای ابتدایی وب، طراحان وب برای نمایش متون مورد نظر از فونتهای استاندارد استفاده میکردند. برای زبان فارسی، عموم وبسایتها از فونت Tahoma استفاده میکردند، تنها دلیل استفاده از این فونت، اطمینان خاطر از وجود این فونت در سیستم کاربر نهایی بود. با ظهور وب فونتها این قابلیت بوجود آمد که طراح صفحه وب، یک فونت که در سیستم کاربر وجود نداشت را، در صفحه وب مورد نظرش استفاده کند و مطمئن باشد که کاربر نهایی صفحه مورد نظر را با استفاده از فونت دلخواه او مشاهده میکند.
در آغاز موج نو نگرش به فونتها در وب، شرکتهای تولید کننده مرورگر اقدام به وضع استانداردهای داخلی برای پشتیبانی از فونتهای خاص کردند. برای مثال مرورگر اینترنت اکسپلورر از فرمت EOT پشتیبانی میکرد در حالی که فایرفاکس از فونتهای TTF پشتیبانی میکرد. به تدریج مرورگرهای مختلف از فرمتهای مختلف فونت پشتیبانی کردند و این پشتیبانیهای متفاوت از فونتهای متفاوت باعث بوجود آمدن تفاوت در نمایش حروف گردید. بعضی مرورگرها کلمات را با وضوح بهتری نمایش میدادند در حالی که برخی دیگر وضوح نمایش کمتری داشتند.
از طرف دیگر، وجود موتورهای رندر متن متفاوت در مرورگرها باعث بوجود آمدن مشکلاتی در نمایش حروف میشد. که البته این مشکل هنوز هم وجود دارد. برای مثال عمده مرورگرهای نصب شده در ویندوز ایکس پی اعم از اینترنت اکسپلورر ۶ – فایرفاکس پیش از نسخه ۴ – اپرا – سافاری و غیره از موتور رندر متن پیشفرض ویندوز، Uniscribe استفاده میکنند که از Grayscale Antialiasing برای نمایش متون استفاده میکند. اما اینترنت اکسپلورر ۷ و ۸ از ClearType برای نمایش متون استفاده میکنند. با این تفاوت که اگر کاربر اقدام به نصب اینترنت اکسپلورر ۸ کند، موتور رندر متن پیشفرض ویندوز هم تغییر میکند، لذا اگر کاربر از فایرفاکس پیش از نسخه ۴ یا سافاری و اپرا استفاده کند، متون او با استفاده از ClearType نمایش داده خواهند شد. اما اینترنت اکسپلورر ۹ و فایرفاکس نسخه ۴ به بعد، از DirectWrite برای نمایش متون استفاده میکنند. همچنین باید در نظر داشت که سیستم عامل ایکس مکینتاش از نسخه ۱۰٫۴٫۲ به بعد از CoreText جهت نمایش متون استفاده مینماید.
این تفاوت چشمگیر در موتورهای رندر متن باعث بوجود آمدن مشکلات زیادی در نمایش متون شده است که در بعضی محصولات کلمات بصورت شکسته شده نمایش داده میشوند. لذا خود فونت به تنهایی هر چقدر هم که کامل و زیبا باشد جهت نمایش متون کافی نیست، موتورهای رندر متن هم از اهمیت بسزایی برخوردار هستند.
چنانچه پیشتر گفته شد، یک فونت از تعدادی گلیف ایجاد شده است، و هر چه تعداد این گلیفها بیشتر باشد یک فونت برای نمایش اطلاعات غنیتر خواهد بود. اما این تعداد زیاد در وب قابل توجیه نیست. تصور کنید شما یک متن ساده را به زبان فارسی در وب نمایش میدهید، آیا نیاز هست که فونت شما حاوی گلیفهای زبان انگلیسی یا آلمانی باشد؟ مسلما وجود گلیفهای بیش از اندازه و افزونگی گلیفها باعث بالا رفتن حجم یک فونت میشود که این امر در وب اصلا خوشآیند نیست.
مورد دیگری که باید در نظر داشت آن است که زبانهای لاتین عموما دارای کاراکترهایی با ارتفاع یکسان هستند، اما زبانهایی مانند زبان فارسی، عربی، اردو و غیره دارای کاراکترهای کاملا متفاوتی هستند، برخی به سمت بالا کشیده میشوند و برخی به سمت پایین. این تفاوت ظاهری در فونتهای لاتین و زبانهای دیگر باعث شده که استانداردهای تدوین شده، که عموما بر اساس رسمالخط لاتین وضع شدهاند، فارسیزبانان را دچار مشکل کند. چراکه حروف مرتفع فارسی بصورت بالقوه توانایی رعایت ارتفاع استاندارد حروف لاتین را ندارد، و حتی در صورتی که این ارتفاع رعایت شود کلمات خطوط پایینتر، کلمات جملات خطوط بالاتر را دچار مشکل میکنند و کلمات روی هم میافتند.
خیلی از این مشکلات را در زمان طراحی فونت میتوان برطرف کرد. برای مثال پیادهسازی صحیح ارتفاع با صرف زمان تا حد قابل قبولی قابل رفع است، بخصوص مشکل کدپونتهای اشتباه که در فونتهای فارسی امری مرسوم است، با صرف کمی زمان کاملا برطرف میشود. گلیفهای مشخص و با تعداد پایین هم در پایین آوردن حجم فونت موثر خواهد بود. همه اینها نشان از یک چیز دارد و آن این است که یک وب فونت باید با دید کاربرد در وب طراحی شود. در اکثر فونتهای فارسی حروف انگلیسی هم گنجانده شده، ولی در یک وب فونت بدانها نیازی نیست لذا با یک طراحی صحیح تا حد زیادی میتوان این مشکلات را برطرف کرد.
با استفاده از یکسری دستورات CSS میتوان وب فونت را به یک صفحه وب الصاق کرد تا کاربر نهایی در هنگام بازدید از صفحه وب شما، فونت دلخواه شما را مشاهده نماید.
برای توسعه یک وب فونت نیازی نیست تا همه کارها را از ابتدا انجام دهیم، اگر یک فونت سالم در اختیار داشته باشیم میتوانیم با حذف گلیفهای اضافه حجم آن را پایین بیاوریم و با کمی کنترل گلیفها میتوان ارتفاع حروف را نیز مشخص کرد. سپس با گرفتن یک خروجی مجدد و تعیین اطلاعات جانبی فونت و مجوز استفاده از آن، میتوان از یک فونت بصورت وب فونت استفاده کرد. سرویسهای زیادی هستند که فونتها را تبدیل به وب فونت میکنند. عملکرد بیشتر آنها یکسان است و صرفا یکسری از جداول مورد استفاده در فونت را برای فشده کردن هر چه بیشتر فونتها از بین میبرند. برای مثال جداول کرن که نبود آنها حجم قابل توجهی از فونت را کم میکند. در نهایت با استفاده از یکسری دستورات CSS میتوان وب فونت را به یک صفحه وب الصاق کرد تا کاربر نهایی در هنگام بازدید از صفحه وب شما، فونت دلخواه شما را مشاهده نماید.
نظر شما
-
خدمات طراحی سایت
-
ویترین اخبار
- راه اندازی سایت نشریه الکترونیک فرهنگ انقلاب اسلامی
- ملاک شناخت یک شرکت طراحی سایت قوی و توانا برای راه اندازی سایت اینترنتی شما چیست؟
- فرا رسیدن نوروز باستانی، یادآور شکوه ایران و یگانه یادگار جمشید جم بر همه ایرانیان پاک پندار، راست گفتار و نیک کردار خجسته باد
- راه اندازی وب سایت اینترنتی ماشین سازی درستگاههای تولید آرد
- راه اندازی وب سایت اینترنتی ملک آریا
- 7 مورد از قابلیتهای غیرمنتظره در iOS 7
- Apex در برابر Nova: مقایسه دو لانچر اندروید
- پاداش 15,000 دلاری برای شکستن قفل TouchID
- نیکون از AW1، اولین دوربین ضد آب با قابلیت تعویض لنز، پرده برداشت
- لومیا 1520 نوکیا و این بار مشخصات فنی، قیمت و زمان عرضه
- رکورد فروش موبایل در دست 8 مدل
- اپل در حال تست نسخه های 701 و702 و 71 سیستم عامل iOS؟
- علت دقیق سرعت پایین اینترنت را نمیدانیم
- بررسی اکسپریا Z1 سونی
- آموزش ساخت ایمیل یاهو پس از حذف ایران!
- سهام توییتر روانه بازار بورس میشود
- تبلیغات تازه مایکروسافت علیه آیفون شکست خورد
- مدیرعامل اینتل: تبلتهای زیر 100 دلاری در تعطیلات سال نوی میلادی از راه میرسند
- 27 شهریور iOS 7 برای آیفونها و آیپدها منتشر میشود
- کنسول بازی جدید سونی با قابلیت های جذاب و قیمت مناسب معرفی شد: Vita TV
- کمپانی دل برای چینی ها لب تاب لوحی می سازد!!!
- ایسوس فون پد 7 اینچی جدید را معرفی کرد: تبلت/تلفن هیبریدی با اسپیکر دو کاناله
- یاهو لوگوی جدید خود را رونمایی کرد
- ایسوس از لپتاپ لمسی و ارزان قیمت X102BA با پردازنده AMD پرده برداشت
- دوباره Moto X و این بار تصویر رندر شده تبلیغاتی آن [بروز شد]
- ولخرجیهای گوگل در حوزه دیتاسنتر ادامه دارد: 6-1 میلیارد دلار در سه ماهه دوم 2013
- تشکیل گروه جهانی« طراحی فناوریهای پوشیدنی» در موتورولا، با استناد به آگهی استخدام این شرکت
- آشنایی با سیستمفایلها و نحوه فرمتکردن درایوهای خارجی در مک
- سرفیس RT هنوز نمرده است
- دانلود کنید: اپلیکیشن VLC برای کاربران iOS منتشر شد
- بررسی همهجانبۀ شایعات پیرامون ساعتهای هوشمند
- تصاویر واضح از آیفون ارزان قیمت در کنار آیفون 5 فاش شد
- تبدیل تصاویر به فرمت ICO و استخراج آیکونها از فایلهای با فرمت EXE و DLL
- نسخه جدید اندروید در 2 مردادماه معرفی میشود
- ال جی از نام G2 برای پرچمدار بعدی خود استفاده میکند
- مشخصات فنی و بنچمارک گلکسی نوت 3 فاش شد
- تصویر و مشخصات جدید آیفون 5S به بیرون درز کرد: صفحه نمایش IGZO، دوربین 12 مگاپیکسل، پردازنده سریعتر و پردازنده گرافیکی چهار هستهای
- آیا میتوان پس از مرگ اطلاعات با ارزش را در اختیار خانواده، دوستان و آشنایان قرار داد؟
- تصاحب Omek توسط اینتل ممکن است باعث شود هرگز نیاز به لمس کامپیوتر خود نباشید
- نسخه جدید تحت وب نقشه گوگل در دسترس همگان قرار گرفت
- تلفن G2 ال جی مجهز به باتری 2540 میلی آمپر ساعتی است
- جزئیات بیشتر از دوربین 20 مگاپیکسلی هونامی: سنسوری بزرگ ولی نه به اندازهی لومیا 1020
- مرور تاریخچه دوربین در گوشیهای برجسته نوکیا
- دریافت استاندارد و رتبه 6 از 10 گوگل توسط سایت شرکت راوک نگار پارس
- بروزرسانی تعدادی از جدیدترین نمونه آثار طراحی سایت های هوشمند راوک نگار پارس
-
نماد اعتماد الکترونیکی
-
آمار بازدید
- کل (online):۳۶۰۶
- اعضاء (online):۰
- میهمان (online):۳۶۰۶
- بازدید امروز::۳۱۳۰
- بازدید دیروز::۳۷۱۷
- بازدید کل::۲۵۷۳۸۹۷۴
-
تبلیغات