هر طراح وب رویای ایجاد یک وب سایت با تایپوگرافی زیبا را دارد. اما، متأسفانه، مرورگرها فقط از چند نوع تایپ پشتیبانی می کنند، به اصطلاح فونت های «ایمن وب». مجموعه استاندارد شامل فونت های زیر است: آریال, وردنا, بار, گرجستان, پیک جدیدو چندین نفر دیگر
هدستمجموعه ای از یک یا چند فونت را تعریف می کند که هر کدام از کاراکترهایی تشکیل شده است که دارای ویژگی های مشترک طراحی هستند - وزن، سبک، طراحی، وزن، چگالی، اندازه، به عنوان مثال، فونت های sans-serif (یا sans serif)، فونت های سری (antiqua) ). حروف چاپی شامل مجموعه ای از کاراکترها (اعداد، حروف، علائم نگارشی، کاراکترهای خاص، و همچنین ممکن است از کاراکترهای غیر الفبایی باشد) تشکیل شده است.
فونتمجموعه ای از شخصیت ها با اندازه، وزن و سبک خاص است. برای مثال، سبک 16 پیکسلی Times New Roman یک فونت است و 10px ایتالیک Times New Roman یک قلم دیگر است.
قاعده @font-faceبه شما اجازه می دهد تا انواع فونت های سفارشی را به هم متصل کنید. مرورگر فونت ها را در حافظه پنهان بارگذاری می کند و از آنها برای استایل دادن به متن صفحه استفاده می کند. این رویکرد نامیده می شود جاسازی فونتو فونت های تعبیه شده - فونت های وب.
قانون @font-face باید قبل از سایر قوانین css قرار گیرد زیرا این کار باعث بهبود عملکرد صفحه می شود. فونت های قابل دانلود را می توان در پوشه فونت های مخصوص ایجاد شده در سرور قرار داد.
برای اضافه کردن یک فونت با استفاده از قانون font-face@، باید:
1) فایل فونت را در چندین فرمت به سرور آپلود کنید تا توسط همه مرورگرها پشتیبانی شود.
2) نام فونت را مشخص کنید، پیوندی به فایل ثبت کنید و توضیحات فونت را تنظیم کنید.
3) نام فونت را به ویژگی font-family عنصری که در آن فونت رندر می شود اضافه کنید.
@font-face ( font-family: "WebFont"؛ src: url(WebFont.eot?) قالب("eot")، /* IE8+، علامت؟ اشکال در کنترل کننده مقدار src */ url(WebFont.woff) فرمت ("woff")، /* همه مرورگرهای مدرن، IE9+ */ url(WebFont.ttf) قالب ("truetype")؛ /* همه مرورگرهای مدرن */ ) p (فونت-خانواده: "WebFont"، Arial، sans serif ;)
این کد به مرورگر می گوید که متن داخل عنصر را نمایش دهد
با استفاده از فونت وب اگر مرورگر به دلایلی نتواند یک فونت معین را بارگیری کند، فونت مناسب را از لیست فونت ها انتخاب می کند. بر روی آنها به همین ترتیب تکرار می شود تا زمانی که فونتی را پیدا کند که بتواند با موفقیت از آن استفاده کند.
در هر خانواده فونت، حداکثر 9 وزن قابل تعریف است. بنابراین، برای هر فونت جاسازی شده، و همچنین برای هر سبک، باید یک قانون @font-face جداگانه تنظیم کنید، یعنی. شما نمی توانید در یک قانون دو فونت متفاوت یا یک فونت از یک خانواده، اما با سبک ها و وزن های مختلف را اعلام کنید.
@font-face ( font-family: "WebFont"؛ src: url(WebFont.eot?) قالب("eot")، url(WebFont.woff) قالب("woff")، url(WebFont.ttf) قالب( "truetype")؛ وزن فونت: پررنگ؛ سبک فونت: مورب؛ ) @font-face ( فونت-family: "WebFont"؛ src: url(WebFont.eot?) قالب("eot")، url(WebFont .woff) قالب ("woff")، url (WebFont.ttf) قالب ("truetype")؛ وزن قلم: 400؛ سبک فونت: معمولی؛ )
به طور کلی، می توانید ویژگی های زیر را برای یک فونت تنظیم کنید:
@font-face ( font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; )
اگر فرض کنید که کامپیوتر کاربر فونت را نصب کرده است و می‌خواهید فونت فقط پس از بررسی اینکه آیا کاربر آن را دارد دانلود شود، می‌توانید از مقدار local() برای تنظیم آدرس استفاده کنید:
@font-face ( font-family: "WebFont"؛ src: local("WebFont")، url (WebFont.eot?) قالب ("eot")، url (WebFont.woff) قالب ("woff")، url (WebFont.ttf) قالب ("truetype")؛ وزن قلم: پررنگ؛ سبک فونت: مورب؛ )
فرمت های فونت وب
ویژگی @font-face پشتیبانی خوبی از مرورگر دارد، اما مرورگرهای مختلف از فرمت های مختلف فونت استفاده می کنند. چهار قالب اصلی فونت وجود دارد:
فرمت WOFF(Web Open Font Format)، یک قالب فونت وب باز که توسط موزیلا توسعه یافته است. از نظر فنی، WOFF را نمی توان یک قالب فونت نامید، زیرا فقط یک بسته بندی با عملکرد فشرده سازی است. فرمت فونت های TTF/OTF را برای استفاده در وب فشرده می کند. همچنین، WOFF به شما امکان می دهد متادیتا را به فایل اضافه کنید، مانند اطلاعات مجوز.
فرمت های OTF/TTF(Font OpenType و TrueType Font) در اکثر مرورگرها کار می کنند. هر دو فرمت آزادانه توزیع می شوند.
فرمت EOT(نوع باز تعبیه شده) ایجاد شده توسط توسعه دهندگان مایکروسافت، یک کپی فشرده از فونت TTF است که استفاده مجدد از آن توسط فناوری های DRM (مدیریت حقوق دیجیتال، مدیریت حقوق دسترسی دیجیتال) ممنوع است. از نسخه 8 فقط در IE پشتیبانی می شود.
SVG/SVGZ(Scalabe Vector Graphics) یک نوع فایل فونت است که نمایانگر وکتور یک فونت است. به عنوان یک قاعده، اندازه فایل های کوچک تری دارد و در نتیجه عملکرد بهتری را در دستگاه های تلفن همراه ممکن می کند. در Opera Mobile و iOS Safari کار می کند.
مشکلات در استفاده از فونت های داخلی
1) فایل های فونت می توانند بزرگ باشند، بنابراین در برخی موارد افزودن @font-face سرعت بارگذاری صفحه را کاهش می دهد.
2) برخی از فونت ها دارای محدودیت های مجوز هستند که از استفاده رایگان جلوگیری می کند.
3) برخی از فونت ها در صفحات وب ظاهر خوبی ندارند.
فونت هارا می توان به هر اندازه ای کوچک کرد، در حالی که هنوز واضح و آسان برای خواندن است. آنها را می توان به هر چاپگر یا دستگاه خروجی دیگری که توسط ویندوز پشتیبانی می شود ارسال کرد.
فونت هابا فونت‌های TrueType مرتبط است، اما معمولاً از طیف گسترده‌ای از کاراکترهای اصلی مانند حروف کوچک‌تر، اعداد به سبک قدیمی و اشکال اضافی (مانند حروف و رباط‌ها) استفاده می‌کند. فونت های OpenType را می توان به هر اندازه ای کوچک کرد و واضح و آسان برای خواندن هستند. آنها را می توان به یک چاپگر یا دستگاه خروجی دیگری که توسط ویندوز پشتیبانی می شود ارسال کرد.
فونت های پست اسکریپتجزئیات و عملکرد گرافیکی بالایی دارند. از آنها برای چاپ به ویژه برای چاپ حرفه ای کتاب و مجلات با کیفیت بالا استفاده می شود.
کدام فونت را انتخاب کنید
به عوامل زیادی بستگی دارد. اگر به فونتی نیاز دارید که به راحتی روی صفحه و کاغذ خوانده شود، بهتر است آن را انتخاب کنید فونت نوع واقعی.
اگر به یک مجموعه کاراکتر بزرگ برای برچسب‌های زبان و تایپوگرافی نیاز دارید، باید از آن استفاده کنید فونت نوع باز.
برای انتشارات حرفه ای (مانند مجلات براق) یا چاپ صنعتی، PostScript را انتخاب کنید.
هی هابر!
چندین مقاله قبلاً در توصیف جنبه‌های مختلف کار با فونت‌های وب نوشته شده‌اند، نمونه‌های کار زیادی جمع‌آوری شده‌اند، اما هر روز همچنان با سوء تفاهم ابتدایی در مورد فونت‌های وب مواجه می‌شویم. همه وقت ندارند مطالبی را در مورد این موضوع در گوگل جستجو کنند، بنابراین سعی کردم به سوالات متداول پاسخ دهم. این مطالب در درجه اول مورد توجه کسانی است که هنوز به پیچیدگی های فن آوری فونت نپرداخته اند.
01. اصلا چرا به فونت های وب نیاز داریم، چرا از فونت های استاندارد استفاده نکنیم؟
اولین چیزی که به ذهن می رسد این است که فونت های استاندارد به طرز وحشتناکی خسته کننده هستند و با کمک آنها انجام کار اصلی دشوار است. به عنوان یک قاعده، اکثر آنها نه تنها برای کاربران، بلکه برای طراحان وب نیز ناراحتی و ناامیدی به ارمغان می آورند. فونت‌های غیر استاندارد در این مورد گویاتر هستند و علاوه بر این، تعداد آنها بیشتر است، بنابراین گزینه‌های زیادی برای انتخاب وجود دارد. و با این حال، فونت بخشی جدایی ناپذیر از نام تجاری است، بنابراین هر شرکتی تلاش می کند تا فعال تر از آن استفاده کند، زیرا چنین فرصت فنی ظاهر شده است.و می توان فونت های استاندارد را به طور کامل کنار گذاشت، به خصوص که بسیاری از سیستم عامل های تلفن همراه از آنها پشتیبانی نمی کنند (به عنوان مثال، Arial، Taһoma، Verdana و Georgia). اما متأسفانه این صنعت که سال هاست به صفحه نمایش 96 DPI و وردان های گرجستانی تنظیم شده بود، کاملاً آماده تغییرات سریع نبود و در سیستم عامل های قدیمی ویندوز هنوز به دلیل ویژگی های خاص، مشکلاتی برای نمایش فونت های غیر استاندارد وجود دارد. مکانیسم شطرنجی سازی
02. چگونه یک فونت وب خوب انتخاب کنیم؟
فونت فقط مجموعه‌ای دیجیتالی از حروف نیست که با قلم مو روی کاغذ یا در تصویرگر ایجاد می‌شود، بلکه 98% تنظیم و صیقل دادن، اشاره و آزمایش بر روی رسانه‌های مختلف و در اندازه‌های مختلف است. چنین فونتی خوب به نظر می رسد ، سبک آن کامل شده است ، هیچ مشکلی با آن چه در چاپگر و چه روی صفحه وجود نخواهد داشت ، کیفیت خوبی دارد.اما در هنگام انتخاب فونت، حتی این موضوع خیلی مهمتر نیست، بلکه مصلحت و انطباق فونت با روش استفاده و وظایف محول شده به آن است. اگر با فونت کار می کنید، شما باید بفهمید که چگونه همه چیز کار می کندچه فناوری هایی استفاده می شود این کمک خواهد کرد که دسته ای از قوانین به خاطر سپردن نامفهوم را در ذهن نداشته باشید. به عنوان مثال، هر چاپگری که به خود احترام می گذارد می داند که چرا استفاده از فونت های TrueType برای چاپ افست نامطلوب است، از کدام فونت ها می توان به عنوان فونت متن استفاده کرد و کدام فونت را می توان فقط برای سرفصل ها یا فهرست ها استفاده کرد. اگر او این را نداند، پس باید تیراژ عظیمی را تجدید چاپ کند و در محل کار دائماً شگفتی ها و مشکلاتی خواهد داشت. شگفت آور است که چرا هیچ کس از طراحان وب درخواستی ندارد.
03. مرورگرها چگونه فونت ها را رندر می کنند؟
آنها می گویند که اغلب شنیده ام که مرورگرها خودشان فونت ها را ارائه می دهند، بنابراین در همه جا متفاوت به نظر می رسند. اما در واقع، یک زیر سیستم گرافیکی ویژه سیستم عامل در رندر کردن فونت ها نقش دارد: در ویندوز، این GDIیا مستقیم نوشتنو در OS X و iOS - متن اصلی(و زودتر QuickDraw). درمجموع، 3 مکانیسم رایج شطرنجی کردن فونت (رندر) وجود دارد: پیکسل دو رنگ (سیاه و سفید)، پیکسل تک رنگ (که اغلب به آن antialiasing یا معمولی anti-aliasing می گویند) و subpixel. ساب پیکسل از ویژگی نمایشگرهای LCD و پلاسما استفاده می کند که در آن هر پیکسل به 3 قسمت (قرمز، سبز و آبی) تقسیم می شود تا وضوح تصویر رندر شده را افزایش دهد و وضوح را بهبود بخشد.
با این حال، مرورگرها روش رندر خود را از بین روش هایی که سیستم عامل ارائه می دهد، انتخاب می کنند. به عنوان مثال، به عنوان بخشی از GDI، 3 گزینه رندر وجود دارد: سیاه/سفید، ضد aliasing معمولی و subpixel نوع واضح. ویژگی دومی این است که هموارسازی فقط به صورت افقی مطابق با آرایش زیرپیکسل ها اتفاق می افتد. به همین دلیل است که هنگام استفاده از آن، اغلب دندان های وحشتناکی را در ضربات افقی و مورب نوع مشاهده می کنیم. خوشبختانه، مایکروسافت به آرامی شروع به بهبود مکانیسم کرد و GDI با فناوری DirectWrite جایگزین شد، جایی که anti-aliasing عمودی ظاهر شد. مقایسه کنید:
04.TTF یا OTF؟
TrueType و PostScript در اصل قالب های مختلف فونت بودند. TrueType از منحنی های Bezier درجه دوم استفاده می کند، در حالی که PostScript از منحنی های مکعبی استفاده می کند که برای طراحان Illustrator و Photoshop آشنا هستند. امروزه، هر دو روش توصیف منحنی ها به عنوان بخشی از یک فرمت OpenType استفاده می شود، تنها تفاوت این است که فایل های TrueType دارای پسوند TTF هستند، در حالی که فایل های PostScript دارای پسوند OTF هستند. هر یک از فناوری‌ها ویژگی‌های اشاره‌ای و ویژگی‌های کاربردی خاص خود را دارند.
به تصویر نگاه کن. اگر فونت TrueType در اندازه کوچک بسیار خواناتر است، اما در اندازه بزرگ دندانه های مشخصه را می بینیم، پس برای فونت PostScript همه چیز دقیقا برعکس است. این به این دلیل است که مرورگرها روش های غربالگری مختلفی را برای PS و TT انتخاب می کنند. برای PS، مرورگر از آنتی آلیاسینگ تک رنگ معمول استفاده کرد و TT توسط ClearType پردازش شد. بنابراین معلوم می شود که TrueType برای فونت های متنی ترجیح داده می شود و PostScript برای سرفصل ها و نوشته های بزرگ مناسب تر است.
همچنین می بینیم که هنوز همه مرورگرها از DirectWrite استفاده نمی کنند. بنابراین، هنوز در Google Chrome نیست.
05. چه چیز دیگری روی نمایشگر تأثیر می گذارد؟
گاهی اوقات بهتر است روش شطرنجی را به صورت دستی تنظیم کنید. به عنوان مثال، در مرورگرهای دارای موتور Webkit، می توانید از ویژگی CSS استفاده کنید - وب کیت-فونت-صاف کردنو به صورت دستی آنتی آلیاسینگ معمولی را به جای anti-aliasing sub-pixel فعال کنید و بالعکس. همچنین راه‌های غیرمعمولی برای واداشتن مرورگر به تغییر روش شطرنجی وجود دارد، در Habré زمانی پیشنهاد شد از هک با text-shadow استفاده کنید.ما نباید اندازه فونت (اندازه فونت) را فراموش کنیم. شکل طرح کلی، کنتراست ضربه ای و خوانایی می تواند از اندازه ای به اندازه دیگر بسیار متفاوت باشد. ویرایشگر گرافیکی را کنار بگذارید و ببینید که فونت وب در مرورگر چگونه در جنگ به نظر می رسد.
راه دیگر برای صاف کردن عیوب ضد آلیاسینگ، مدیریت رنگ و کنتراست است. برای کاهش اثر کانتورینگ رنگی (لبه های زرد و سرخابی هنگام استفاده از ClearType ظاهر می شوند)، می توانید سعی کنید کنتراست تونال را با نزدیک کردن رنگ پس زمینه به رنگ متن کاهش دهید. زیاد غافلگیر نشوید، حواستان به کاربران کم بینا باشد.
06. آیا فونت های وب نیاز به اشاره دارند؟
نکات دستورالعمل‌های ویژه‌ای هستند که فونت انتزاعی سیم سخت را به پیکسل‌های روی نمایشگر منحنی می‌کند. اکثریت قریب به اتفاق فونت ها (از جمله فونت های تجاری) اشاره ای ندارند، زیرا این یک روش نسبتاً پر زحمت و پیچیده است. اشاره TrueType و PostScript متفاوت است. اگر از فونت ارزانی استفاده می کنید، قالب OTF ایمن تر است، زیرا در TT این روش از روزهای غربالگری سیاه و سفید بدون تغییر باقی مانده است و کاملاً مناسب نیست، اما برای PS این روش ساده تر است و نویسنده این فرصت را دارد که اشاره خودکار را انجام دهیدیک فونت بدون اشاره هنگام شطرنجی تار می شود و ارتفاع حروف می تواند پرش کند.
فونت اشاره شده از یک طرف کاملاً واضح، متضاد و یکنواخت است و از طرف دیگر شکل حروف بسته به اندازه مخدوش می شود و ممکن است فواصل آن با حروف واقعی متفاوت باشد. حروف به شدت از پیکسل ها تبعیت می کنند.
در ویندوز، ما شاید رادیکال ترین رویکرد را مشاهده کنیم: فونت های محبوبی مانند Tahoma، Verdana، Arial و Georgia به طور خاص برای GDI ClearType معرفی شدند، و هنگامی که DirectWrite ظاهر شد، فونت های اصلی در سیستم عامل باید اشاره و به روز می شدند.
برخلاف مایکروسافت، اپل رویکرد مخالف را در پیش گرفته است، بنابراین سیستم عامل‌های آن از الگوریتم‌هایی استفاده می‌کنند که امکان خروجی کم و بیش با کیفیت بالا را از هر فونتی فراهم می‌کند و به هیچ وجه اشاره‌ای در نظر گرفته نمی‌شود.
در پاسخ به این سوال: عصر مانیتورهای 300 DPI به سرعت در حال نزدیک شدن است و تعداد زیادی از دستگاه های تلفن همراه در حال حاضر چنین وضوحی دارند و به زودی به هیچ وجه نیازی به اشاره نخواهد بود. اما از آنجایی که ویندوز همچنان وابسته به اشارات است و بر روی مانیتورهای با وضوح پایین متمرکز است، سعی کنید فونت های اشاره شده یا استاندارد با کیفیت بالا را به عنوان فونت متن انتخاب کنید، در غیر این صورت متن غیرقابل خواندن و خواندن آن دشوار خواهد بود.
07. @font-face یا Cufon؟
هر چقدر هم که عجیب به نظر برسد، هنوز هم افرادی هستند که این سوال را از خود می پرسند. به نظر می رسد پس از اینکه مرورگرها از ویژگی @font-face پشتیبانی کردند، سایر فناوری های جاسازی فونت (Cufon، sIFR، Flash) باید نامربوط می شدند. اما هنوز مقداری معنی باقی می ماند، به عنوان مثال، روشی برای جایگزینی یک فونت با یک تصویر، زمانی که منحنی های برداری در سایت نمایش داده نمی شود، بلکه فقط یک چاپ نمایش داده می شود، چگونه یک چاپگر آن را روی یک صفحه چاپ می کند، یا فتوشاپ یک JPG غیرقابل ویرایش را نمایش می دهد. این توسط بسیاری از مجوزهای فونت معمولی (رومیزی) مجاز است. برخی از فروشندگان فونت (مانند Adobe) اجازه می دهند یک فونت دسکتاپ (در برنامه ها و روی سرور) تا زمانی که محافظت شده باشد و دانلود نشود، جاسازی شود. اگر گزینه ای برای خرید مجوز وب جداگانه ندارید، می توانید زمانی که فونت با استفاده از اشیاء فلش جاسازی شده است، از یک sIFR مناسب برای آن استفاده کنید. عیب آن استفاده از فلش است که توسط همه دستگاه ها پشتیبانی نمی شود. اگر مجوز اجازه می دهد می توانید از فناوری Cufon نیز استفاده کنید (از Canvas استفاده می شود). البته در این صورت فیلمنامه دست و پا گیر خواهد بود و انتخاب متن جواب نمی دهد، اما در شرایط ناامیدکننده ای کار می کند.اما بهتر است از @font-face استفاده کنید، هم از نظر فناوری پیشرفته تر و هم راحت تر است، علاوه بر این، تجربه کافی برای کار با آن انباشته شده است. این تنها یک اشکال دارد، اینکه همه تولیدکنندگان اجازه نمی‌دهند از فونت‌هایشان در وب استفاده شود.
08. فایل های فونت باید با چه فرمت هایی باشند؟
امروزه فونت های آماده شده برای جاسازی (@font-face) در سایت باید در چندین قالب به طور همزمان باشند:TTFیا OTF- یک فایل فونت آشنا برای ما، اما در هنگام مرور سایت از سرور بارگیری شده است.
واف- یک آرشیو منبع OTF یا TTF محافظت نشده، شاید مهم ترین فرمتی که اکثر مرورگرهای محبوب پشتیبانی می کنند، و فایل های WOFF معمولاً 2-2.5 برابر سبک تر از نسخه های اصلی هستند.
EOT- آرشیو پیاده سازی شده توسط TT OpenType که دارای مکانیسم های حفاظتی است، برای پشتیبانی از مرورگرهای قدیمی اینترنت اکسپلورر مورد نیاز است (از IE8 شروع می شود، علاوه بر منحنی های TrueType، PostScript نیز پشتیبانی می شود).
SVG- برای پشتیبانی از مرورگر سافاری.
09. آیا می توان فونت های وب را تبدیل کرد؟
هر چه به شما گفته شود، نمی توانید فایل را تبدیل کنید و کیفیت اصلی فونت را حفظ کنید، به خصوص اگر در ابتدا با فرمت OpenType باشد. در این فرآیند، شانس از دست دادن برخی از داده های جاسازی شده در فایل فونت (دستورالعمل های کامپایل شده، کاراکترهای اضافی، معیارها) وجود دارد. این را زمانی متوجه خواهید شد که فایل به طور ناگهانی در حین تبدیل نازک‌تر می‌شود، مخصوصاً تبدیل TrueType به PostScript و بالعکس غیرمعمول است.
علاوه بر این، فرآیند تبدیل تقریباً همیشه شرایط مجوزی را که تغییر را ممنوع می کند، نقض می کند. به عبارت دیگر همان دزدی است. هنگامی که فایل ها را به مبدل می اندازید، مطمئن شوید که آنها را از بین نمی برد و اخطار صادر می کند، زیرا فایل حاوی امضای دیجیتال سازنده و ممنوعیت های مربوط به تغییر است.
10. وزن فونت های وب چقدر باید باشد؟
مرورگر باید قبل از رندر کردن صفحه، فایل های فونت را به طور کامل دانلود کند. ممکن است اثر "فلش فونت" (یا FOUT) را دیده باشید، زمانی که فونت های استاندارد سیستم به جای فونت های عجیب و غریب برای لحظه ای کوتاه چشمک می زنند. طبیعی است که TTF (OTF) در 100 کیلوبایت و WOFF (EOT) در 50 کیلوبایت قرار گیرد. همیشه به این فکر کنید که آیا اصلاً نیاز به استفاده از فونت های غیر استاندارد دارید، حتی اگر از آن در 1 عنوان کوتاه استفاده کنید، باز هم باید کل فایل فونت را دانلود کنید.هرچه طراحی شما کمال‌گراتر باشد، فایل‌های فونت کوچک‌تر می‌شوند و سعی کنید اشکال ساده را انتخاب کنید. از این نظر، فرم ایده آل یک گروتسک هندسی باز با کنتراست اندک است. برای سرعت بخشیدن به بارگذاری یک فونت، گنجاندن آن در شیوه نامه با data:uri نیز می تواند مفید باشد.
11. چند سبک فونت را می توان در وب استفاده کرد؟
از دیدگاه یک طراح، تعداد زیادی از حروف چاپی جالب هستند. و در واقع، برای هدر - Bold، و در آنجا، برای نوار کناری - ExtraLight، ما معمولاً متن‌های غیرضروری را اضافه می‌کنیم و آنها را به صورت Condensed Bold فشار می‌دهیم. اینجاست - ثروت واقعی و تنوع سبک. اما وقتی همه این "ثروت" شروع به انتقال به سایت می کند، معلوم می شود که همه چیز به طرز وحشتناکی کند است. و بهتر است حتی سعی نکنید چنین سایتی را از دستگاه تلفن همراه باز کنید. و فراموش نکنید که هر سبک مقداری هزینه دارد، و کاملاً ممکن است که مشتری از شما بخواهد که مترادف فونت را پیدا کنید یا تعداد سبک ها را کاهش دهید. استفاده از حداکثر 2-3 سبک از یک یا حروف مختلف طبیعی است.12. آیا باید مجموعه کاراکترها را محدود کنم؟
پاسخ به این سوال بستگی به نوع سایت و نحوه استفاده از آن دارد. محدودیت ها می توانند مفید باشند زیرا می توان حجم فایل ها را به میزان قابل توجهی کاهش داد. گاهی اوقات، به دلیل ناآگاهی، توسعه دهندگان فایل های فونت سنگین را با مجموعه کامل کاراکترهای آن در سایت آپلود می کنند و اگر هیروگلیف وجود نداشته باشد خوب است (برای اطلاع، فونت Arial Unicode حاوی بیشتر کاراکترهای جدول یونیکد 22 مگابایت وزن دارد) .کسانی که سایت‌های انگلیسی زبان را آسان‌تر می‌کنند، اصلاً نیازی به بارگذاری کاراکترهای اضافی ندارند، فقط آنهایی که به زبان لاتین اصلی (یا ASCII) هستند. اگر از فونت فقط برای سرفصل‌های روسی + انگلیسی استفاده می‌کنید، مجموعه‌های ASCII (لاتین پایه) و 64 کاراکتر الفبای روسی برای شما کافی خواهد بود، اصلاً لازم نیست مجموعه سیریلیک Extended 420 کاراکتری را بارگیری کنید. اگر سایت شما چند زبانه باشد، داستان کاملاً متفاوت است، در این صورت، برای جلوگیری از نمایش نادرست کاراکترها، باید سعی کنید تمام زبان های مورد استفاده را پوشش دهید.
13. آیا می توان از کلون فونت استفاده کرد؟
این اتفاق می افتد که خرید فونت اصلی یا خیلی گران است یا اصلاً غیرممکن است، پس انتخاب مترادف فونت (کلون) مناسب خواهد بود. البته نباید از آنها انتظار کیفیت شگفت انگیز داشت، حتی اگر مثلاً توسط یک شرکت معروف روسی ساخته شده باشند. همه چیز بد است وقتی با اثری از سواد ناشناس روبرو می شوید که تصمیم گرفته است خود را در زمینه جدیدی امتحان کند، مراقب چنین فونت هایی باشید. در اینجا نمونه‌هایی از کلون‌ها (نسخه اصلی در پرانتز مشخص شده است): FreeSet (Frutiger)، Pragmatica و Helios (Helvetica). لطفا توجه داشته باشید که شکل حروف ممکن است متفاوت باشد. تعداد زیادی کلون در فهرست مترادف فونت Paratype وجود دارد.
14. چگونه یک فونت را تست کنیم؟
طراحان، عادت نکنید که فونت ها را فقط از طریق پنجره فتوشاپ ببینید، ویرایشگرهای تصویر از روش های خود برای صاف کردن متن استفاده می کنند و می توانید فریب یک تصویر زیبا را بخورید. یادگیری نحوه آزمایش و تماشای آنها در مرورگرها بسیار مفیدتر است. اگر صفحه نمایشی وجود دارد، مطمئن شوید که در حین رندر کردن، انواع مصنوعات و اسپک ها بیرون نیایند. همچنین ابزاری مانند Typecast وجود دارد که می توانید فونت های زیادی را بررسی کنید و سپس صفحه را به مشتری نشان دهید. برای کسانی که فونت جدیدی را برای سایتی که قبلاً تمام شده انتخاب می‌کنند، سرویس Web Fonts Previewer برای شما ضروری است، می‌توانید هر فونتی را در یک سایت فعال آزمایش کنید، گویی قبلاً آن را پیاده‌سازی کرده‌اید.15. من روی کامپیوترم فونت دارم، آیا می توانم از آن در سایت استفاده کنم؟
ابتدا کمی در مورد دزدی. من طراحان زیادی را می شناسم که هزاران فونت روی رایانه هایشان دارند که منشأ آنها مشخص نیست. به عنوان یک قاعده، آنها به سادگی از اینترنت دانلود می کردند. اما بنا به دلایلی، هیچکس فکر نمی کند که ایجاد فونت های خوب ماه ها و گاهی سال ها کار جدی طول می کشد! اما نه تنها به این دلیل نمی توانید از Singed استفاده کنید، بلکه مشخص نیست که فونت ها از کجا گرفته شده اند، بلکه به این دلیل که می توانید در مرحله توسعه با مشکلات جدی روبرو شوید.
اگر می خواهید فونت همراه با سیستم عامل را در سایت خود جاسازی کنید، فقط می توانید این کار را با شطرنجی کردن یا استفاده از آن در تصاویر انجام دهید. اگر واقعاً نیاز به جاسازی دارید، باید یک مجوز جداگانه خریداری کنید، درست مانند فونت های معمولی (هر دو گرجستان و تاهوما در دسترس هستند).
16. چگونه یک فونت وب بخریم؟
وقتی یک فونت می‌خرید، نزدیک‌ترین چیزی که به خرید نرم‌افزار می‌رسید، زمانی است که مجوز استفاده از آن را دریافت می‌کنید، نه حقوق خود فایل برنامه. معلوم می شود که یک فایل فونت کامپایل شده قانونی یک برنامه است. تغییر و تغییر، در صورتی که مجوز اجازه آن را ندهد، نقض حق چاپ محسوب می شود.یک راه راحت برای خرید فونت از طریق کاتالوگ فونت است (Fonts.com، MyFonts، Ascender، Typekit). شما قادر به مشاهده، مقایسه و انتخاب یکی از گزینه های موجود برای استفاده، پرداخت با کارت خواهید بود. برای شرکت‌ها، راحت‌تر است که مستقیماً با تولیدکننده استودیو تماس بگیرند یا خرید فونت‌ها را به مشتری ارائه دهند.
یا شاید بهتر است اصلاً برای یک فونت پول خرج نکنید؟ فونت های رایگان بسیار زیادی وجود دارد که به خوبی فونت های پولی هستند!
17. مجوزها چیست؟
مجوزهای فونت انواع مختلفی دارند و با ظهور فونت های وب، تنوع آنها فقط افزایش یافته است. در زندگی واقعی، هر شرکتی قوانین بازی را خودش تعیین می کند و مجوز فونت ممکن است حاوی ویژگی های مختلف دیگری باشد. ما به معمولی علاقه مند خواهیم شدمجوز تجاری عمومی استفاده از تعداد معینی از دستگاه ها را محدود می کند و امکان توزیع آثار ایجاد شده با استفاده از فونت را فراهم می کند. اینها می توانند مجلات، روزنامه ها، بروشورها، کارت ویزیت، تصاویر نوع شطرنجی باشند - همه با هم می توانید آنها را چاپ نامید. این مجوز برای فیلم، تلویزیون، وب و تعبیه در برنامه ها و برنامه ها مناسب نیست، چنین حقوقی باید جداگانه خریداری شود.
مجوزهای خاصی نیز وجود دارد، به عنوان مثال: مجوز با حقوق انحصاری. در این صورت شرکت تمامی حقوق را از طراحان فونت خریداری می کند و حتی نویسنده فونت حق استفاده از آن را در جایی ندارد. زمانی که چنین فونت هایی در تورنت هستند یا زمانی که برخی از طراحان شخص ثالث از آنها استفاده می کنند شگفت آور است.
مجوزهای رایگان (دامنه عمومی) - نویسنده فونت توزیع رایگان را با شرط مشخص کردن نام خود (Creative Commons) یا بدون آن (به عنوان مثال OFL، GPL، Apache 2.0) اجازه می دهد. این نوع مجوز حتی امکان استفاده تجاری به جز فروش و توزیع پولی را نیز می دهد. مثال: PT Sans، Opensans، Droid. گاهی اوقات یک تغییر فونت (GPL) مجاز است، اما تغییری که ایجاد می‌کنید به طور خودکار همان مجوز را به ارث می‌برد (یعنی شما همچنین می‌توانید فورک شوید). آزادی به این معناست که می توان از آن در هر رسانه ای از جمله استفاده کرد. و وب
رایگان برای استفاده غیرتجاری - یعنی می توانید در همه مواردی که از آن درآمدی ندارید از آن استفاده کنید. به عنوان مثال، برای آموزش، سرگرمی ها و پروژه های اجتماعی. گاهی اوقات، تولیدکنندگان به طراحان اجازه استفاده از آن را می دهند، به این امید که مشتری خوش شانس طراح، نسخه تجاری فونت را خریداری کند.
18. تفاوت لایسنس برای فونت های وب چیست؟
مجوزهای وب مورد علاقه ما هستند و یا به عنوان یک افزونه به مجوز اصلی می آیند یا جداگانه ارائه می شوند. یک مورد خاص - استفاده از فونت ها در سایت ها را تنظیم می کند. به عنوان یک قاعده، مهمترین محدودیت در تعداد بازدید از صفحه است. مثلاً 10 هزار در ماه، 100 هزار یا 1 میلیون. یعنی هر چه تعداد بازدیدکنندگان از سایت شما بیشتر باشد، هزینه بیشتری برای لایسنس پرداخت می کنید. همچنین گزینه های نامحدودی وجود دارد که برای یک فونت یک بار پرداخت می کنید، اما آنها چندین برابر گران تر هستند. احتمالاً از خود پرسیده اید که آیا کسی بر تعداد بازدیدها نظارت می کند؟ اغلب نه. اما فراموش نکنید که تعداد زیادی پیشخوان ترافیک سایت شما را نظارت می کنند و با برانگیختن شک فروشنده، می توانید مجوز خود را از دست بدهید.و با این حال، یک مجوز وب جداگانه اجازه استفاده در رایانه های معمولی را نمی دهد. گاهی اوقات مجوز وب به صورت رایگان صادر می شود، یعنی همراه با خرید فونت دسکتاپ، حق استفاده از نسخه تحت وب آن را به دست می آورید. اما این هنوز نادر است، اکثریت قریب به اتفاق تولید کنندگان نیاز به هزینه اضافی دارند.
پس از خرید، فایل‌های خاصی را دریافت می‌کنید که در سایت قرار می‌دهید (TTF، OTF، WOFF، EOT) و برخی از فونت‌ها به شما اجازه نمی‌دهند این فایل‌ها را به صورت محافظت نشده در سایت قرار دهید، زیرا در تئوری اشخاص ثالث می‌توانند دریافت کنند. خود فایل های فونت گزینه سوم این است که از وب سرویس تولید کننده فونت سفارشی مانند Adobe's Typekit استفاده کنید و هزینه اشتراک را بپردازید.
19. فونت های وب خوب را از کجا می توانم تهیه کنم؟
کاتالوگ فونت های رایگان گوگلFontsquirrel یک مبدل و دایرکتوری معروف فونت وب است
Myfonts - یک فروشگاه بزرگ فونت با یک سیستم پرداخت راحت
Fonts.com - رقیب اصلی MyFonts
Typekit - خدمات اجاره فونت از Adobe
Typecast - فروشگاه فوق با خدمات تست
P.S. یکی دیگر از منابع مفید پیشنهاد شده توسط ilyaerin، WebFont.ru Functionality over Form: Designing for the Reader
ماریا دورولی. صدور مجوز. تا روشن شود
تیم براون. رندر را در وب تایپ کنید
تیم براون. ویژگی های CSS که بر رندر نوع تأثیر می گذارد
تیم براون. نوع رندر: سیستم عامل
تیم آرنس نگاهی دقیق تر به رندر فونت
تیم آرنس (Typekit). نگاهی دقیق تر به اشاره TrueType
مزایای OpenType/CFF نسبت به TrueType
ایلدار کینیابولاتوف، طراح وب ADV/مهندسی وب
در حین کار بر روی پلتفرم رایانه شخصی مک یا ویندوز، دائماً از فونت استفاده می کنید. از طراحان گرافیک که صدها یا حتی هزاران فونت در مجموعه های خود دارند تا کاربران عادی که فقط با مجموعه استاندارد فونت های سیستم عامل و برنامه ها سروکار دارند، همگی به طور مداوم از آنها هنگام ایجاد اسناد، خواندن مطالب در اینترنت و ... استفاده می کنند. مدیریت رابط کاربری درک اینکه چگونه قالب‌های اصلی فایل فونت‌ها متفاوت هستند، به شما کمک می‌کند تا به طور گسترده‌تر از آنها استفاده کنید و از طیف کاملی از فونت‌ها استفاده کنید.
فایل‌های TTF بخشی از مجموعه فونت‌های TrueType ویندوز هستند. با ظهور نسخه های اخیر Mac OS X، این فرمت فونت تک پلت فرم رایج شده است و اکنون در هر دو سیستم عامل غالب جهان وجود دارد. اپل فرمت TrueType را کمی تغییر داد و آن را برای جایگزینی تایپ‌فیس‌های شطرنجی منسوخ با استانداردی انعطاف‌پذیرتر آماده کرد و با موفقیت آنها را در سیستم‌عامل جدید معرفی کرد.
استاندارد TrueType استفاده از یک فایل واحد را برای توصیف یک فونت فراهم می کند که حاوی تمام اطلاعات لازم برای رندر (طراحی) یک فونت بر روی صفحه نمایش و هنگام چاپ آن است. برای مقایسه با TrueType، اجازه دهید بگوییم که برخی از فونت‌های تایپوگرافی قدیمی، مانند PostScript Type 1 (طراحی شده توسط Adobe Systems)، طراحی بسیار پیچیده‌تر و قابل خواندن‌تری دارند.
استاندارد OTF مخفف تایپ تایپ OpenType است و بر اساس آخرین فناوری های ساخت فونت است. مانند TrueType، فونت های OpenType چند پلتفرمی هستند. اما، بر خلاف نسخه قبلی، آنها به شما اجازه می دهند چندین سبک نمایش را به طور همزمان در یک فایل قرار دهید و از مجموعه کاراکترها به زبان های مختلف پشتیبانی کنید.
علاوه بر این، فونت‌های OpenType می‌توانند از سبک‌های مختلف تایپ در انتخاب برنامه‌های خاص استفاده کنند و بسته به زمینه آنها را تغییر دهند. این استاندارد جدید به طراحان فرصتی عالی برای طراحی حروف نوشته هایی که شبیه دست خط هستند، داده است. بسته به فونت OpenType خاص، ممکن است بر اساس الگوریتم های منحنی گرفته شده از TrueType یا PostScript Type 1 باشد.
استاندارد DFONT (فایل هایی با پسوند DFONT) مخفف فونت Datafork TrueType است. فرمت این فایل استاندارد فونت های سیستمی سیستم عامل Mac OS X بود اما همزمان با عرضه Mac OS X 10.6 Snow Leopard، اپل این استاندارد را با مجموعه فونت TTC یا TrueType Collection جایگزین کرد. فرمت DFONT به طور انحصاری تحت سیستم عامل Mac OS X پشتیبانی می شود و محکوم به فراموشی است، زیرا دیگر قرار نیست به چند پلتفرم تبدیل شود.
فرمت های دیگر
فونت های بیت مپ قدیمی محدودیت های قابل توجهی داشتند. بنابراین، هر یک از آنها فقط می توانند از سه اندازه (ارتفاع) در اسناد استفاده کنند و برای این کار باید به یک برنامه مدیریت فونت خاص متوسل می شد. این محدودیت ها به سرعت توسط طراحان گرافیک کنار گذاشته شد.
فونت های PostScript Type 1 بر این عیب غلبه کرده و در هنگام چاپ به خوبی مقیاس می شوند، اما چاپگر باید با این استاندارد فونت سازگار باشد. Adobe Systems، توسعه‌دهنده این استاندارد، متعاقباً استفاده از برنامه Adobe Type Manager را برای حذف محدودیت‌ها هنگام چاپ پیشنهاد داد.
فایل OTF یک فایل فونت است که به طور مشترک توسط Adobe و Microsoft توسعه یافته است. این فرمت فایل شامل ظاهر فرمت هایی مانند TrueType و همچنین PostScript است. فونت های OpenType را می توان بدون از دست دادن کیفیت متن اصلی، مقیاس بندی کرد.
پسوند OTF در سیستم عامل های Mac OS و همچنین سیستم های ویندوز پشتیبانی می شود. پلتفرم های مایکروسافت از ویندوز 2000 شروع به پشتیبانی از فایل های OTF کردند. شایان ذکر است که این نوع فایل علاوه بر هدف اصلی خود، می تواند به عنوان یک فایل قالب مورد استفاده توسط OpenOffice برای تولید فرمول استفاده شود. در چنین حالتی، وجود یک فایل .otf در پر کردن خودکار جداول با استفاده از فرمول مفید است. پسوند فایل OTF دارای توزیع گسترده ای در بین کاربران است.
کارشناسان معتقدند که این پسوند فایل به اصطلاح یک کانتینر است که بر اساس قوانین TrueType تشکیل شده است و می تواند حاوی فایل های داده PostScript و TrueType باشد. یک فونت نوع باز که می‌تواند انواع داده‌های جدیدی را که در قالب‌های TrueType وجود نداشتند، ذخیره کند. فایل‌های با پسوند otf می‌توانند خطوط، معیارها و اطلاعات خدمات را ذخیره کنند.
برای باز کردن فایلی که دارای پسوند OTF است، مانند سایر فایل های فونت، از Font Viewer مایکروسافت استفاده می شود. کاربران MacOS می توانند یک فایل OTF را به لطف مجموعه Apple Font Book باز کنند. یک ابزار جهانی که قادر به باز کردن یک فایل .otf در سیستم های ذکر شده در بالا، از جمله سیستم های روی پلت فرم لینوکس است، FontForge است.
