قانون Font-Face @ و چند ترفند برای کار با فونت های وب. متقابل مرورگر @ font-face

هر طراح وب رویای ایجاد یک وب سایت با تایپوگرافی زیبا را دارد. متأسفانه، مرورگرها فقط از چند نوع تایپ پشتیبانی می کنند که به آن فونت های «ایمن وب» می گویند. V مجموعه استانداردفونت های زیر گنجانده شده است: آریال, وردنا, بار, گرجستان, پیک جدیدو چندین نفر دیگر

هدستمجموعه ای از یک یا چند فونت را تعریف می کند که هر کدام از کاراکترهایی تشکیل شده است که یک فونت مشترک دارند ویژگی های طراحی- وزن، سبک، طراحی، نوع تایپ، چگالی، اندازه، به عنوان مثال، فونت های sans serif (یا sans serif)، فونت های سری (antiqua). یک تایپ فیس از مجموعه ای از کاراکترها (اعداد، حروف، علائم نگارشی، نمادهای خاص، همچنین ممکن است از کاراکترهای غیر الفبایی تشکیل شده باشد).
فونتمجموعه ای از شخصیت ها با اندازه، وزن و سبک خاص است. برای مثال، Times New Roman italic style 16px یک فونت است و Times New Roman italic 10px متفاوت است.

@ قانون فونت چهرهبه شما اجازه می دهد تا انواع فونت های سفارشی را به هم متصل کنید. مرورگر فونت ها را در حافظه پنهان بارگذاری می کند و از آنها برای استایل دادن به متن صفحه استفاده می کند. این رویکرد نامیده می شود جاسازی فونت هاو فونت های تعبیه شده هستند فونت های وب.

قاعده 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 (font-family: "WebFont"، Arial، sans -serif;)

این کد به مرورگر می گوید که متن داخل عنصر را نمایش دهد

با استفاده از WebFont اگر مرورگر به دلایلی نتواند این فونت را بارگیری کند، فونت مناسب را از لیست فونت ها انتخاب می کند. از میان آنها به ترتیب نشان داده شده حلقه می زند تا زمانی که فونتی را پیدا کند که بتواند با موفقیت استفاده کند.

در هر خانواده فونت، می توانید تا 9 وزن (وزن) تعریف کنید. بنابراین، برای هر فونت جاسازی شده، و همچنین برای هر سبک، باید یک قاعده font-face @ جداگانه تنظیم کنید، یعنی. شما نمی توانید در یک قانون دو فونت مختلف یا یک فونت از یک خانواده را اعلام کنید، اما سبک های متفاوتو وزن

@ font-face (Font-family: "WebFont"؛ src: url (WebFont.eot?) قالب ("eot")، فرمت url (WebFont.woff) ("woff")، url (WebFont.ttf) فرمت ( "truetype")؛ وزن فونت: پررنگ؛ سبک فونت: مورب؛) @ font-face (فونت-خانواده: "WebFont"؛ src: url (WebFont.eot?) قالب ("eot")، url (WebFont) .woff) قالب ("woff")، آدرس URL (WebFont.ttf) قالب ("truetype")؛ وزن فونت: 400؛ سبک فونت: معمولی؛)

V نمای کلیبرای فونت، می توانید تنظیم کنید خواص زیر:

@ font-face (Font-family: "FontName"؛ src: url () قالب ("")؛ 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(Embedded Open Type) ایجاد شد توسعه دهندگان مایکروسافت، است کپی فشردهفونت TTF استفاده مجددکه ممنوع است فناوری های DRM(مدیریت حقوق دیجیتال، کنترل دیجیتالحقوق دسترسی). فقط در IE 8 و بالاتر پشتیبانی می شود.

SVG / SVGZ(Scalabe Vector Graphics) - یک نوع فایل فونت که نشان دهنده سبک فونت برداری است. به طور معمول دارد اندازه های کوچکترفایل ها، در نتیجه عملکرد را بهبود می بخشد دستگاه های تلفن همراه... در Opera Mobile و iOS Safari کار می کند.

پیچیدگی های استفاده از فونت های تعبیه شده

1) فایل های فونت می تواند باشد اندازه های بزرگبنابراین افزودن font-face@ در برخی موارد سرعت بارگذاری صفحات را کاهش می دهد.
2) فونت های خاصی دارای محدودیت های مجوز هستند که اجازه استفاده رایگان را نمی دهد.
3) برخی از فونت ها در صفحات وب ظاهر بدی دارند.

در مقاله قبلی خود "" من دو مورد از بیشتر را بررسی کردم خدمات محبوببرای جاسازی فونت ها در چیدمان، و همچنین قول داد که اسرار استفاده از آن را در مقاله بعدی فاش کند.

فرض کنید طراح در چیدمان خود استفاده کرده است بسیار شیک، محبوب ترینفونت عنوان بنر MyriadPro از Adobe. Google WebFonts آن را ندارد، البته فقط به این دلیل که Adobe آن را رایگان نکرده است.

اما وظیفه این است، و اکنون به نقطه. آیا فکر کرده اید که چگونه در طرح MyriadPro جاسازی کنید.

به اینجا می رویم و تصویر زیر را می بینیم:

فونت یا فونت های خود را اضافه کنید (ما آن را Myriad Pro Regular خواهیم داشت) و حالت "Expert" را انتخاب کنید. ما می‌توانیم قالب‌های فونت را انتخاب کنیم - توصیه می‌کنم همه چیز را همانطور که هست رها کنیم - کار می‌کند حداقل، برای همه نسخه های مدرنمرورگرها اپرای قدیمی(دو سال پیش) اگر اشتباه نکنم با SVG کار کرد اما رندر وحشتناکی داشت و بدون هیچ گونه آنتی آلیاسینگ.

زیرمجموعه سفارشی را انتخاب کنید. این برای انتخاب دقیقاً آن دسته از کاراکترها (یعنی کاراکترهای زبان) لازم است. و ما به احتمال زیاد به "انگلیسی"، "سیریلیک" و گاهی اوقات "دویچ" را اضافه می کنم. من همچنین آنچه را که در اسکرین شات است اضافه می کنم - در واقع شما هرگز نمی دانید چه نمادهای دیگری ممکن است مورد نیاز باشد، و من به خصوص نمی خواهم این روش را برای بار دوم تکرار کنم (همراه با یکپارچه سازی).

سیریلیک دارید؟ فوق العاده است. بیایید به مرحله بعدی برویم:

ما می توانیم فونت های خود را مستقیماً با استفاده از Base64 Encode در CSS جاسازی کنیم (همه مرورگرهای مدرن این ترفند را با گوش خود پشتیبانی می کنند). این امر در کاهش بار روی سرور (تعداد تماس با آن کاهش می یابد) و همچنین در سرعت بارگذاری صفحات تأثیر مثبت خواهد داشت.

همچنین می‌توانید نام CSS به‌دست‌آمده را تغییر دهید و هر گزینه دیگری که حجم فایل را افزایش می‌دهد و در عمل ضروری نیست، اضافه کنید.
ما به بقیه دست نمی زنیم - ارزشش را ندارد.

ما در مورد این واقعیت دروغ می گوییم که این فونت بدون محدودیت اجازه استفاده در اینترنت را دارد (اما در واقع فقط در طرح بندی ها. PSD، با قضاوت بر اساس Adobe EULA) و یک فایل فشرده دریافت می کنیم.

در آن ما فایل "fontname-demo.html" را خواهیم دید - آن را باز کنید و یک صفحه زیبا با فونت های ما ببینید. برای بررسی الفبای سیریلیک ما، به "گلیف ها و زبان ها" بروید، به پایین صفحه بروید.

همه را چک می کنیم مرورگرهای مدرن: کروم، فایرفاکس، اینترنت اکسپلورر 9، اپرا و سافاری. سیریلیک دارید؟ فوق العاده است.

خوب، حالا بیایید همه چیز را در CSS خود جاسازی کنیم (به فایل stylesheet.css مراجعه کنید)، و فایل های فونت را در پوشه خود کپی کنید - فقط در مورد:

حالا نتیجه را ببینیم:

کار کردن. همه چیز بسیار ساده و زیبا است.

یک داستان کوتاه در مورد نحوه درست تولید یک فونت برای Runet. در مرکز توجه، فونت سنجاب سرویس بورژوایی قرار دارد که قبلاً در هابره شناخته شده است.

اگر زیبایی برای نجات جهان است، پس طراحان رابط های وبارتش شر است اشتباه نکنید، من خودم را در نظر می گیرم طراح وبو من نمی توانم طراحان طرح بندی کج را تحمل کنم، باید تحقیق psd خودم را با همان دست های کج تایپ کنم. و اینجا جالب ترین شروع می شود ...

چگونه همه چیز در عمل است:

1. اول از همه، همه چیز به انتخاب پشته فونت مناسب برای Runet برمی‌گردد، و اگر اینطور نبود، پس باید آن را در نظر می‌گرفتم. با انتخاب پشته مورد نظربدنش را تغذیه می کنیم، چیزی شبیه این:

بدن (
font-family: "Arial Black"، "Helvetica CY"، "Nimbus Sans L" sans-serif;
اندازه فونت: 12px;
}

در نتیجه، یک فونت پایه نزدیک به آنچه در طرح‌بندی طراحی خود استفاده می‌کنیم، دریافت می‌کنیم. خوب!

2. با رضایت از کارایی آنها، به طرح طراحی کار با دقت نگاه می کنیم و در جاهایی (چه در منو، چه در فوتر) تقریباً در بین همه چاپگرها محبوب می بینیم: Myriad Pro، Arial Narrowیا برخی دیگر اروپااز StarCraft. سه گزینه بلافاصله به ذهن می رسد: جایگزین کردن با تصاویر، قرار دادن JS (بله، همان cufon)، یا یک بار دیگر ویژگی CSS را لمس کنید. @ font-face... بله، فکر رها کردن شیطان در مقیاس جهانی و استفاده از پشته امن در همه جا، البته برای ما به وجود نمی آید - همانطور که می گویند، ما زیبایی را در زندگی "مجسم" می کنیم.

اولین گزینه ای که به ذهن می رسد این است که همه چیز را با png جایگزین کنیم - همانطور که پدربزرگ های ما در سپیده دم پارینه سنگی انجام دادند، فوراً آن را کنار می گذاریم.
گزینه دوم (cufon.js) برای مشتری ما مناسب نیست، خدا رحمتش کند - یک مشتری هوشیار روی زمین وجود داشت. - پس بیایید به نقطه سه برویم.

3. ما به دنبال فونت مورد نیاز خود از داخل ویندوز 7 بر اساس دنباله زیر هستیم: "Start → Control Panel → Fonts"، آن را کپی کنید. پوشه محلیبر روی کامپیوتر خود با پروژه و باز کردن فونت ژنراتور fontsquirrel. در مورد من، MyriadProCondensed است.

برای شانس، روی دکمه ها کلیک کنید و دریافت کنید css آمادهدارایی از سری:

@ font-face (
font-family: "MyriadProCondensed";
src: url ("myriadpro_cond-webfont.eot")؛
src: فرمت url ("myriadpro_cond-webfont.eot? #iefix") ("embedded-opentype")،
فرمت url ("myriadpro_cond-webfont.woff") ("woff")،
فرمت url ("myriadpro_cond-webfont.ttf") ("truetype")،
فرمت url ("myriadpro_cond-webfont.svg # MyriadProCondensed") ("svg");
وزن فونت: عادی;
سبک فونت: عادی.
}

همچنین نمونه ای از نحوه نمایش فونت ما در مرورگرها در آرشیو دانلود دریافت می کنیم. و همه چیز خوب خواهد بود، اما نتیجه به دست آمده آنطور که ما نیاز داریم کار نمی کند. و به نظر می رسد قرار داده اند کارشناس ...در تنظیمات، و حتی با انتخاب نوعی چک باکس - اما هنوز هیچ اثری وجود ندارد - حروف روسی نمی خواهند MyriadProCondensed شوند.

من دو روز در گوگل جستجو کردم، اول از همه Habr را باز کردم، از آنجا که در واقع در مورد سرویس مطلع شدم، با تشکر، چیزی در این مورد پیدا نکردم و به "گوگل" خلق و خوی ادامه دادم. دو روز بعد، حال و هوا ظاهر شد و من شروع به مرتب کردن سرویس www.fontsquirrel.com در قفسه ها کردم، یعنی به دنبال محلی سازی الفبای سیریلیک در آنجا بودم.

4. پیداش کردم! در مجموع لازم بود "دکمه رادیویی" را در آن قرار دهید زیر مجموعهبه موقعیت زیرمجموعه سفارشی... در محتوای حذف شده از مجموعه، کادر را علامت بزنید زباندر موقعیت سیریلیک.

5. هورا کار کرد. بریم یه قهوه بخوریم از شکیبایی همهی شما ممنونیم.

P.S. من حتی شما را متقاعد نمی‌کنم که طرح‌بندی/رابط را پشته‌های ایمن بسازید. بگذار بر وجدان ما باشد، اما من یک چیز را می دانم، در حالی که این نوع شیدایی وجود دارد - جهان به آرامی اما مطمئناً به ورطه می لغزد. هیچ چیز زیبایی در مورد این واقعیت وجود ندارد که خواندن فونت از روی صفحه نمایش مانیتور غیرممکن است - نه!

امروز می خواهم در مورد آن صحبت کنم ویژگی CSS@ font-face، که استفاده از فونت دلخواه را در سایت آسان‌تر و راحت‌تر می‌کند. اما یک "اما" وجود دارد که باید حل شود - مرورگرهای مختلف به فرمت های مختلف نیاز دارند فایل های فونت.

معرفی

طبق آمار در این لحظهحداقل 92 درصد از مرورگرهای دسکتاپ به درستی با font-face @ کار می کنند. همه چیز به سادگی انجام می شود: ما فونت را نامگذاری می کنیم، مسیر آن را نشان می دهیم، مستقیماً از آن در CSS استفاده می کنیم:

// فونت را اعلام کنید
@ font-face (
font-family: "نام قلم";
src: url ("مسیر / به / او")؛
}

// فونت را اعمال کنید
پ (
font-family: "Font name", Arial;
}

در اینجا در src: url مسیر فایل با فونت مشخص شده است، در src: local - نام فونت در ماشین محلیدر صورتی که کاربر قبلاً این فونت را داشته باشد. اما، همه چیز به این سادگی نیست، مرورگرهای مختلففرمت های مختلف فونت مورد نیاز است.

فرمت های فونت

فونت ها می توانند در فرمت های TTF، OTF، EOT، SVG و WOFF باشند:

• اینترنت اکسپلورر (همه نسخه ها) - EOT؛
• فایرفاکس (از 3.5) - TTF / OTF (WOFF از نسخه 3.6 اضافه شده است).
• اپرا (شروع از 10) - TTF / OTF؛
• کروم (همه نسخه ها) - SVG (TTF / OTF در پایان ژانویه 2010 اضافه شد).
• سافاری (از 3.2) - TTF / OTF.

همانطور که می بینید، ما حداقل چهار نوع فایل داریم که باید بارگذاری شوند.

استفاده صحیح

برای اینکه هر بار زمان زیادی را برای ایجاد چندین فایل فونت و نحو اتصال مختلف تلف نکنید، مردم خوبساخته شده یک سرویس - پروتئین فونت. وارد می‌شویم، فونت را دانلود می‌کنیم، بایگانی با نمونه‌ای از کاربرد و انواع فایل‌های مورد نیاز دریافت می‌کنیم.

اکنون می توانید بررسی کنید که همه چیز در همه جا همانطور که باید کار می کند. برای سرگرمی، پیشنهاد می‌کنم نگاهی بیندازید که مرورگر متقابل @ font-face چگونه است:

@ font-face (
font-family: "TheanoDidotRegular";
src: url ("theanodidot-regular-webfont.eot")؛
src: محلی ("☺")،
فرمت url ("theanodidot-regular-webfont.woff") ("woff")،
فرمت url ("theanodidot-regular-webfont.ttf") ("truetype")،
فرمت url ("theanodidot-regular-webfont.svg # webfontE40g3tc3") ("svg");
وزن فونت: عادی;
سبک فونت: عادی.
}

همین. از فونت های مختلف زیاد استفاده نکنید ;-)

امکان جاسازی هر قلمی که دوست دارید در وب سایت ها با استفاده از @ font-face یک ترفند سبک اضافی است که برای از بین بردن یکنواختی فونت های سیستمی معمولی طراحی شده است. اگر همه فقط از یک تایپ فیس استفاده کنند، مطمئناً خیلی ساده و کم خواهد بود. در این مقاله فقط در مورد آن صحبت خواهیم کرد.

این معرفی سریع به @ font-face به شما بینشی در مورد ادغام فونت با @ font-face می دهد. اگر می خواهید از برخی فونت های خاص استفاده کنید، در اینجاست که نحوه ادغام آنها را در سرور خود خواهید فهمید. در این مقاله سعی خواهیم کرد انواع اطلاعات مفید مرتبط با این موضوع را فهرست کنیم.

فرمت های فونت وب

EOT، TTF، OTF، CFF، AFM، LWFN، FFIL، FON، PFM، PFB، WOFF، SVG، STD، PRO، XSF، و این همه نیست. احتمالاً یافتن راه خروج از جنگل آسان تر از فونتی است که 100٪ برای شما کار می کند. بیایید نگاهی به جوانب مثبت و منفی یکپارچه سازی فونت بیندازیم.

TrueType

این قالب در سال 1980 در رقابت Adobe Type 1 برای PostScript ایجاد شد. این قالب، بر اساس فناوری‌های جدید، جایگزین بسیاری از قالب‌های دیگر شد که تا آن زمان در حال استفاده بودند. مایکروسافت شروع به استفاده از قالب TrueType کرد و به زودی به فونت استاندارد سیستم تبدیل شد.

نوع باز

روزی روزگاری، مایکروسافت و ادوبی با هم متحد شدند تا بسازند این فرمت... به اندازه کافی عجیب، بر اساس قالب TrueType است، اما عناصر اضافی مانند لیگاتورها، کاراکترهای زمینه و غیره در آن تعبیه شده است. با این حال، بسیاری از مرورگرها هنوز از این فرمت پشتیبانی نمی کنند. دو تا هستند نسخه های مختلففرمت OpenType بر اساس فن آوری های مختلف... با جزئیات بیشتر، در اینجا آمده است:

• OpenType با خطوط TrueType (OpenType TT) و
• OpenType با خطوط پست اسکریپت (OpenType PS)

فونت های مبتنی بر TrueType برای وب مناسب تر هستند، و اگر مایکروسافت تمام مشکلات نمایش را برطرف کند، بسیار جالب خواهد بود. سازه های فونت های TrueTypeفونت‌های OpenType و OpenType بسیار شبیه هستند و در Safari 3.1 و نسخه‌های بعدی، Firefox 3.5 و Opera 10 (و در نسخه‌های جدیدتر) پشتیبانی می‌شوند.

EOT

اینترنت اکسپلورر از سال 1990 فرمت (EOT) را پشتیبانی می کند. برخلاف فرمت های TrueType و OpenType، ویژگی های زیر را ارائه می دهد:

• فونت های EOT فشرده تر از OpenType هستند که یک مزیت قابل توجه برای وب است.
• فونت های EOT را فقط می توان در یک دامنه استفاده کرد. این یک چیز بسیار مفید است، زیرا به مبارزه برای حقوق فونت مجاز کمک می کند.

اگر می خواهید تبدیل کنید فونت TTFدر یک فایل EOT، می توانید از ابزار EOTFast (رایگان) استفاده کنید که فقط برای کاربران ویندوز در دسترس است.

واف

در واقع، فرمت WOFF تلاقی جدیدی بین فرمت های TrueType و OpenType است که در واقع آن را جدید نمی کند.

WOFF از الگوریتمی به نام zlib استفاده می کند که می تواند وزن فایل را تا حدود 40 درصد کاهش دهد. علاوه بر این، داده های متا مانند مجوز و غیره را می توان به این فونت اضافه کرد. با این حال، چنین داده هایی نمی توانند توسط مرورگرها تأیید شوند.

این فرمت پشتیبانی می شود مرورگر فایرفاکسشروع از نسخه 3.6 و گوگل کرومشروع از نسخه 5.0. همه مرورگرهای دیگر در حال حاضر در حال انجام تمام تغییرات لازم برای پشتیبانی از این قالب هستند.

SVG

فونت های SVG حاوی کاراکترهای نمادین به عنوان عناصر و ویژگی های استاندارد SVG هستند و به صورت نمایش داده می شوند تصاویر برداری... اما به اندازه کافی عجیب، این یکی از نقاط ضعفاز این فرمت در حالی که EOT، WOFF، PostScript و OpenType را می توان فشرده کرد، این عملیاتنمی توان روی فونت های SVG اعمال کرد.

فونت های SVG خیلی خوب نیستند جایگزین خوببرای فونت های وب، و iOS 4.2 اولین است نسخه موبایلسافاری که از این فرمت پشتیبانی می کند. با این حال، این فرمت تنها فرمتی است که می توانید برای آیفون ها و آیپدهایی که iOS 4.2 را اجرا می کنند، استفاده کنید.

جاسازی فونت ها از سرور شما

برای استفاده از فونت خاصی در طرح های خود نیازی به مجوز ندارید. می توانید از فونت های دارای مجوز قبلی از برنامه های خود استفاده کنید و آنها را به سرور وب خود فشار دهید.

این فونت - بله، این - نه

قبل از اینکه تبدیل انبوه فونت های معمولی به فونت های وب را شروع کنید، سعی کنید تعیین کنید که آیا می توانید آن را مطابق با آن انجام دهید یا خیر توافقنامه مجوز... V مورد کلی، مجوز تجاری اجازه استفاده از فونت را نمی دهد برنامه های مختلفیک جای دیگر. بنابراین، شما نمی توانید از قانون font-face @ استفاده کنید.

در عین حال وجود دارد مقدار زیادیفونت ها و خدمات مخصوص وب شما همچنین می توانید فونت های خود را از MyFonts.com مجوز دهید.

تا زمانی که فرمت WOFF به استاندارد رسمی تبدیل شود، می توانید از این تکنیک ها و خدمات مانند بسیاری از توسعه دهندگان دیگر استفاده کنید.

جاسازی فونت های رایگان

خوشبختانه، در اینترنت می توانید یک دسته کامل از آنها را پیدا کنید فونت های رایگانکه می توانید برای سایت های خود استفاده کنید. می توانید لیستی از فونت هایی را که می توانید با خیال راحت پیاده سازی کنید در webfonts.info پیدا کنید.

یکی بیشتر مجموعه عظیمروی Font Squirrel است. در اینجا می توانید مجموعه کاملی از فونت ها را دانلود کنید که به لطف @ font-face Kit Generator باید بعداً تبدیل شوند.

قبل از دانلود فونت، مطمئن شوید که می توان فونت را برای وب تبدیل کرد!

ایده استفاده از فونت های مختلف در صفحات وب در دو سال اخیر منفجر شده است. فقط می توان رویای چنین سرعت توسعه را داشت. با این حال، توسعه دهندگان هنوز باید با بسیاری از مشکلات رندر بین مرورگرها دست و پنجه نرم کنند. همه این مشکلات زمانی حل خواهند شد که قالب فونت باز وب (WOFF) به عنوان یک استاندارد توسط جامعه توسعه دهندگان پذیرفته شود.

مانع دیگری که قبلاً به آن اشاره شد، رواج عملیات است سیستم های ویندوزکه در آن رندر زیرپیکسلی غیرفعال است (به طور پیش فرض در ویندوز XP یا طبق ترجیح کاربر). در مقایسه با فونت های سیستم، اکثر فونت های وب به دلیل عدم رندر زیر پیکسلی با کیفیت پایین ارائه می شوند. البته به مرور زمان این مشکلبا جایگزینی کاربران سخت افزار قدیمی و سیستم عامل... در همان زمان، اینترنت اکسپلورر 9 با پردازشگر متن DirectWrite کار می کند که پردازش را به طور قابل توجهی بهبود می بخشد.

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

نمایش متن

حتی اگر برخی از طرح‌بندی‌های وب به پیچیدگی طرح‌بندی‌های چاپی نزدیک شوند (به لطف مجموعه‌های غنی از فونت‌های تودرتو)، همچنان وجود دارد. یک مشکل بزرگ: مرورگرها به طور خودکار خط خطی نمی کنند. به خصوص در زبان هایی که در آن زبان های زیادی وجود دارد کلمات طولانی(مثلا آلمانی) که بر خوانایی متن اثر منفی می گذارد.

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

تراشه های OpenType

نیز وجود دارد سمت عقبمدال ها این به این دلیل است که برنامه هایی مانند InDesign و QuarkXPress 7+ از استانداردهای تایپوگرافی OpenType پشتیبانی نمی کنند.

ویژگی‌ها و گزینه‌های OpenType به این قالب اجازه می‌دهد تا به گونه‌ای که بتواند داشته باشد، تکامل یابد امکانات بیشتر... اگر برنامه از این تراشه ها پشتیبانی کند، می توان برخی از کاراکترها را به طور خودکار جایگزین کرد.

برخی از فونت ها فقط با پشتیبانی OpenType قابل استفاده هستند. OpenType جامع می تواند حاوی حروف و عناصر دیگر باشد. با استفاده از ویژگی OpenType، نسخه پایهنسخه با عناصر مربوطه که در نرم افزار پشتیبانی می شود جایگزین می شود. مثال در تصویر:

فایرفاکس 4 که اخیراً منتشر شده است از همه ویژگی های OpenType فوق پشتیبانی می کند. اکنون می توانید از این مزایا به شرح زیر بهره مند شوید:

H1 (-moz-font-feature-settings: "smcp = 1"؛)

مایکروسافت لیستی از ویژگی های OpenType که پشتیبانی می کند ارائه کرده است. بیایید امیدوار باشیم که سایر مرورگرها از این روند پیروی کنند.

امیدواریم این مقاله برای شما آموزنده بوده باشد! همه این مشکلات بعید است به زودی حل شوند. فقط باید صبر کنیم.