هموارسازی CSS. صاف کردن فونت ها با استفاده از ویژگی CSS3 -webkit-font-smoothing

یک عامل دیگر وجود دارد - anti-aliasing، که همه مرورگرها (از جمله Chrome) هنگام استفاده از فونت های غیر استاندارد با آن سازگار نیستند، اگرچه موارد استاندارد نیز همه چیز را صاف نمی کنند. معلوم می شود که فونت زاویه دار می شود و مرزهای آن تیز است و این برای خواندن خیلی راحت نیست.

در صورت نیاز به استفاده فونت شخص ثالثبرای مثال، با "Google.Fonts"، سپس بیشترین روش قابل اعتمادایجاد مجموعه ای کامل از فرمت های فونت، از جمله SVG است. شما می توانید آن را، به عنوان مثال، فقط برای عنوان استفاده کنید.

اگر فونت استاندارد است، می توانید بلافاصله به روش CSS واقع در زیر بروید، زیرا بسیار ساده و واضح است.

روش های اصلی CSS برای خوانایی بیشتر فونت ها

روش CSS

این روشبسیار مینیمالیستی است، زیرا برای پیاده سازی آن، فقط 3 خط کد کافی است و کلاس "title" را به متن ضد مستعار اختصاص می دهد. صاف کردن متن به دلیل سایه رخ می دهد و فقط برای سرفصل ها قابل استفاده است. این روش را می توان به عنوان یک "هک" در نظر گرفت.

عنوان ( text-shadow: -1px -1px 1px rgba(255,255,255, 0.2)

روش CSS3

هنگام حل مشکل صاف کردن فونت در موتور کرومیوم، یک برنامه نویس در Google.Code پیشنهاد داد تصمیم سریعدر CSS3. معلوم شد که این بسیار منطقی است، زیرا می‌توانید SVG و فونت‌های وب شخص ثالث را که وزنی در حدود 200 تا 500 کیلوبایت دارند و به زمان بارگیری اضافی نیاز دارند، کنار بگذارید.

این کد باید به فایل css اضافه شود:

بدنه ( -webkit-font-smoothing: subpixel-antialiased !important؛ -webkit-backface-visibility: پنهان؛ -moz-backface-visibility: پنهان؛ -ms-backface-visibility: پنهان؛ )

* این اشاره برای همه سربرگ های این سایت استفاده می شود

این روش یکی دوتا معایب داره:

روی قدیمی ها کار نمی کند نسخه های کرومزیر 21

فاصله بین حروف (کرنینگ) فونت ممکن است کمی تغییر کند

مشکل کرنینگ را می توان با چیزی شبیه به این کد CSS حل کرد:

بدنه (اندازه قلم: 125%؛ فاصله حروف: 0.05em؛ ارتفاع خط: 1.3em؛ ) بدنه > * (اندازه قلم: 85%؛ ارتفاع خط: 1.3em؛ )

* البته، این پارامترها باید کمی تنظیم شوند تا متناسب با ویژگی های سایت باشند

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

روش SVG

شما به یک تولید کننده فونت وب نیاز دارید fontsquirrel.com/tools/webfont-generator

نیاز به دانلود فونت مورد نظردر قالب ".otf یا .ttf" و این تنظیمات را انجام دهید:

با شرایط موافقت کنید و روی "دانلود کیت خود" کلیک کنید

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

کد CSS برای اتصال فونت ها، که می تواند در آن قرار گیرد فایل جداگانه:

@font-face ( font-family: "Open Sans"; src: url("/font/opensans.eot"); src: url("/font/opensans.eot?#iefix") قالب ("embedded-opentype" "), url("/font/opensans.woff") format("woff"), url("/font/opensans.ttf") format("truetype"), url("/font/opensans.svg#OpenSansRegular ") قالب ("svg")؛ سبک فونت: معمولی؛ وزن فونت: عادی؛ )

* V در این موردهمه فونت های Open Sans در پوشه "font" در ریشه سایت قرار دارند

چند نکته ساده:

حداقل برای anti-aliasing این است که فقط فونت های "woff" و "svg" را اضافه کنید

برای جلوگیری از بارگیری فونت، می توانید تمام خط را در نظر بگذارید /* آدرس فونت */

در "FontSquirrel" می توانید تنظیمات را بررسی کنید و فونت های غیر ضروری را حذف کنید

پارامترهای font-family، font-style، font-weight را می توان به صورت اختیاری پیکربندی کرد.

بر این لحظهمن استفاده می کنم مجموعه کاملفونت های موجود در سایت، از جمله SVG، زیرا روش قابل اعتمادتر است و سرعت میزبانی اجازه می دهد. با گذشت زمان، وقتی "li.ru" این را می گوید کاربر معمولی Runet از یک نسخه نسبتاً جدید مرورگر استفاده می کند، من در مورد تغییر به یک روش CSS خالص فکر می کنم.

با سلام خدمت خوانندگان عزیز.

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

اطلاعات کلی

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

راه اندازی ClearType در ویندوز 7-10

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

مهم!باید به وضوح درک کنید که کل مشکل در ClearType است و نه در وضوح نمایشگر که به درستی تنظیم نشده است. پس از همه، گاهی اوقات این اتفاق می افتد. بنابراین، بهتر است ابتدا این پارامتر را بررسی کنید و فقط سپس بقیه را پیکربندی کنید.

مهم!برای اینکه تمام اقدامات بعدی موثر واقع شوند، باید حقوق Administrator را داشته باشید.

می توانید نمایش نمادها را با استفاده از ابزار مناسب تغییر دهید:

همین. اگر به دلایلی ناگهان نتیجه را دوست نداشتید، همیشه می توانید به این روش بازگردید.

چگونه فونت اپل را نصب کنیم؟

نظرات زیادی در مورد اینکه کدام سیستم عامل بهتر است وجود دارد. اما نکات خاصی وجود دارد که تقریباً نمی توان با آنها استدلال کرد. به عنوان مثال، هیچ کس نمی تواند استدلال کند که طراحی سیستم عامل مک بهتر از بقیه بازار است. به همین دلیل است که بسیاری از مردم به سادگی آن را به عنوان یک پایه در نظر می گیرند.

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

اولی است پروژه باز، که کارش این است که روش جایگزینپردازش فونت در Win و در عین حال، یک طرح کلی صاف، و مهمتر از همه، خواندن دلپذیر تضمین می شود. معمولاً در توزیع‌های Apple OS و Linux یافت می‌شود.

Gdipp از هر دو نسخه 32 و x64 بیتی سیستم های مایکروسافت پشتیبانی می کند. کاربران چه کاری باید انجام دهند؟ فقط به منبع رسمی توسعه دهنده بروید، دانلود کنید آخرین ساختو نصب کنید.

توجه به این نکته مهم است که در برخی از برنامه ها، نمایش متن ممکن است ناخوشایند به نظر برسد.

این در نتیجه تفاوت در استانداردهای معماری رخ می دهد.

علاوه بر این، راه حل MacType بسیار محبوب است. به طور کلی، عملکردهای مشابه ابزار قبلی را انجام می دهد. اما در عین حال دارد ویژگی های اضافیکه یکی از آنها اجرای بیلد 1703 در ویندوز است.

فناوری ClearType برای بهبود نمایش فونت ها در نمایشگرهای LCD طراحی شده است.

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

آماده سازی برای پیکربندی ClearType

برای پیکربندی صحیح هموارسازی فونت با استفاده از فناوری ClearType، باید موارد زیر را انجام دهید:

1. بیشتر نصب کنید نسخه جدیددرایورهای کارت گرافیک این درایور باید توسط سازنده کارت گرافیک شما به طور خاص برای ویندوز 7 نوشته شده باشد.

2. آخرین درایور مانیتور را نصب کنید که با ویندوز 7 سازگار است.

3. وضوح صفحه نمایش را تنظیم کنید که در آن راحت کار کنید.

4. اگر قبلاً این کار را نکرده اید، کامل کنید.

تنظیم ClearType

1. برای تنظیم تنظیمات هموارسازی فونت، روی Start کلیک کنید، تایپ کنید نوار جستجوتیم cttuneو Enter را فشار دهید.

فرآیند تنظیم هموارسازی فونت نباید دشوار باشد.

1. برای غیرفعال کردن صاف کردن فونت در ویندوز 7، آن ​​را باز کنید کنترل پنل -> سیستم -> گزینه های اضافیسیستم های.

2. باز کنید گزینه های عملکردو روی زبانه جلوههای بصری علامت کادر را بردارید فونت های ناهموار صفحه را صاف کنید.

3. کلیک کنید خوبدو برابر.

اکنون ممکن است متوجه شوید که فونت های موجود در رابط برنامه و سیستم عاملخیلی زاویه دار و خیلی کوچک نمایش داده می شوند. دلیل آن این است که در ویندوز 7، "Segoe UI" به عنوان فونت اصلی تنظیم شده است، مقیاس های مختلفی دارد و برای آنتی آلیاسینگ طراحی شده است.

پیکربندی فونت‌های سیستم در صورت غیرفعال شدن آنتی آلیاسینگ

1. برای راه اندازی ظاهر معمولیپنجره ها، باز کنترل پنل -> شخصی سازی -> رنگ و ظاهرویندوز -> گزینه های طراحی اضافی…

2. لیست کشویی پارامترهای نمایش اکثر عناصر را کنترل می کند رابط ویندوز 7. فونت Tahoma، اندازه فونت 8 را در موارد لیست کشویی زیر تنظیم کنید:

• راهنمای ابزار
• آیتم منو برجسته شده است
• عنوان پنجره فعال
• عنوان پنجره غیر فعال
• آیکون
• نام پنل
• جعبه پیام
• نوار منو

لطفا توجه داشته باشید که دو قسمت Size در این پنجره تنظیمات وجود دارد. حاشیه بالا اندازه عنصر رابط ویندوز است و حاشیه پایین اندازه فونت است. بدین ترتیب، برای تنظیم اندازه فونت، تغییراتی را در حاشیه پایین ایجاد کنید، و حاشیه بالایی را بدون تغییر رها کنید.

3. در پاراگراف دکمه های کنترل پنجرهاندازه 21 (در قسمت "اندازه" بالا) را برای ذخیره تنظیم کنید اندازه های استاندارددکمه های "بستن"، "کوچک کردن" و "گسترش".

4. کلیک کنید خوب.

صفحه نمایش و فونت

مقالات جدید

نظرات (10) به “Manage ClearType - هموارسازی فونت در ویندوز 7”

همه اینها واضح است... اما هنگام تغییر وضوح صفحه به کمتر از حد "توصیه شده" با فونت های "مقیاس بندی" چه باید کرد؟ همون anti-aliasing دوباره روشن میشه...هرچند انگار همه جا غیر فعاله...حتی تو رجیستری. چگونه می توان مقیاس بندی را در وضوح صفحه _کم_ غیرفعال کرد؟

LAV، ما چیزی در مورد رجیستری ننوشته ایم. در غیر این صورت Cleartype را غیرفعال کردید، بنابراین ما نمی‌توانیم توصیه‌ای ارائه کنیم. طبق راهنمای ما، صاف کردن فونت به طور کامل غیرفعال است و در هنگام تغییر وضوح یا مقیاس بندی فعال نمی شود.

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

جالبه... چه نوع درایور و چه مدل کارت گرافیک؟

به نظر من، ClearType حتی روی مانیتور CRT من هم عالی کار می کند. همه فونت ها بسیار بهتر از آنتی آلیاسینگ معمولی به نظر می رسند

بستگی به راننده داره قبل از انتشار درایورهای جدید برای nVidia خودم، anti-aliasing را خاموش کردم (تاری وجود داشت) اما الان بعد از نصب درایورهای جدید از anti-aliasing استفاده می کنم.

مردم من متوجه نشدم شخصی سازی را در کنترل پنل از کجا آورده اید؟ ... من چنین موردی ندارم با وجود اینکه ویندوز است ...

پل، کنترل پنل را در حالت نمایش باز کنید " آیکون های بزرگ"، مثلا. "Personalization" بعد از "Folder Options" و قبل از "Remote Desktop Connections" قرار دارد.

آیا راهی برای تنظیم هموارسازی فونت بر روی "Normal" در ویندوز 7 وجود دارد؟ این حالت در XP موجود است، اما من آن را در 7 پیدا نکردم.

چرا می خواهم آن را نصب کنم؟ من نمی خواهم صاف شوم فونت های کوچک، زیرا برای چشم من ناخوشایند و غیر معمول است، درست مانند صاف نکردن فونت های بزرگ.

چگونه می توانم مطمئن شوم که فونت های تا 15 پیکسل در ویندوز 7 ضد نام مستعار نیستند، اما فونت های 15 پیکسل به بالا ضد نام مستعار هستند؟

پیشاپیش از شما متشکرم.

الکسی، به هیچ وجه.

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

همچنین مواقعی وجود دارد که وسوسه انگیز است که متن را کمی پررنگ تر کنید، اما مرورگر متن را فقط به صورت پررنگ یا غیر پررنگ نمایش می دهد.

در مورد هموارسازی فونت باید گفت که برخی از مرورگرها در برخی از سیستم عامل ها همه چیز را خودشان صاف می کنند. بله، و در خود سیستم عامل می توانید صاف کردن فونت را فعال کنید. به عنوان مثال، در ویندوز XP، anti-aliasing در اینجا پیکربندی شده است - Start -> Settings -> Control Panel -> Display -> Appearance Tab -> Effects -> Apply روش بعدیصاف کردن فونت صفحه -> ClearType -> Ok. همه چیز و همه چیز در سیستم عامل هموار خواهد شد.

اما چگونه می توان به آن دست یافت صاف کردن فونت در وب سایت ما در مرورگر همیشه کار می کرد، صرف نظر از مرورگر، سیستم عامل و تنظیمات.

من یک گزینه را برای صاف کردن فونت پیشنهاد می کنم - استفاده از کتابخانه Cufon.

این یک کتابخانه جاوا اسکریپت است.

متن هنگام استفاده از Cufon صاف می شود. در این حالت جاوا اسکریپت باید در مرورگر فعال باشد.

مرورگرهای زیر پشتیبانی می شوند:

• اینترنت اکسپلورر 6، 7 و 8
• اینترنت اکسپلورر 9 بتا (از نسخه 1.09i)
• Mozilla Firefox 1.5+
• سافاری 3+
• Opera 9.5+
• Google Chrome 1.0+
• iOS 2.0+
• Opera Mini (تا حدی)

مثال Antialiasing:

نتیجه مشهود است.

معایب این روش

1. جاوا اسکریپت باید فعال باشد. اما من فکر می کنم بسیاری از کاربران آن را فعال کرده اند.
2. آپلود فایل های JS اندازه می تواند تا 200 کیلوبایت برسد. بسته به فونت.
3. شما نمی توانید متن را انتخاب کنید یا آن را کپی کنید. به عنوان یک گزینه، از Cufon فقط در برخی از قسمت های سایت استفاده کنید - متن در منوی ناوبری، هدر. برای محتوایی که نیازی به کپی نیست.
4. اگر روی پیوند زیر خط کشیده شده باشد، پس از اعمال کتابخانه، زیرخط ناپدید می شود. کمبود کتابخانه
5. طراحی هنگام شناور شدن روی یک عنصر باید به طور جداگانه توضیح داده شود. از سبک ها گرفته نشده است. با این حال، بقیه طراحی مطابق با شیوه نامه خواهد بود.

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

یک بار دیگر به دوره ویدیویی TutsPlus به نام "TutsPlus - PSD To WordPress Minimal Portfolio" بازگشتم، چیزهای جدید و جالب زیادی در آنجا پیدا کردم.

این بار سوال مربوط به ملک خواهد بود

، بنابراین به طور خاص برای این سوال وقت گذاشتم تا با جزئیات بیشتر به آن بپردازم. اول از همه، من به htmlbook.ru رفتم - یک منبع ضروری دانش برای یک طراح طرح بندی html.

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

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

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

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

اما پارادوکس اینجاست: چشم انسان متوجه نمی شود این حقیقت، اما درست برعکس - چنین نمایش حروف فونت برای او واضح تر و روان تر به نظر می رسد. برای اینکه بیشتر توضیح ندهم چه چیزی و چقدر است، تصویری را ارائه خواهم داد که با وقاحت از سایت htmlbook.ru "برداشتم"، زیرا خودم قادر به ایجاد چنین چیزی نبودم:

در سیستم عامل های محبوب، این فناوری برای مدت طولانی مورد استفاده قرار گرفته است نام های مختلفبه عنوان مثال در ویندوز یک نام اختصاصی ClearType دارد. با این حال، با کمک ویژگی های CSS

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

بنابراین، لازم نیست به دنبال چنین تنظیماتی در مرورگر فایرفاکس باشید - به سادگی وجود ندارد. اما در Safari چنین تنظیمی وجود دارد (در Chrome تلاش های من نیز ناموفق بود):

خوب، در مورد مرورگرها کافی است - بیایید به CSS و ویژگی ها برویم

- Anti-aliasing کاملاً غیرفعال است.

- درجه صاف شدن قوی

و در زیر هر سه مثال از نمایش متن در را می‌آورم مرورگر سافاریبرای هر ارزش دارایی

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

مورد دوم

مشابه متن دوم، اما متن کمی پررنگ به نظر می رسد، که به زیبایی متن قبلی نیست. واضح است که ویژگی اصلی در قالب HTML توسط Adi Purdila این است: -webkit-font-smoothing : antialiased ;

... چیزها خیلی جلو نرفتند.