alireza_s_84
جمعه 04 بهمن 1392, 20:15 عصر
توی پروژه ی جدیدی که داشتم کار میکردم ، نیاز بود تا از فونت های فارسی استفاده کنم. خب قاعدتا میدونید که مرورگر کروم متاسفانه از سیستم قدیمی رندرینگ فونت سیستم عامل ویندوز استفاده میکنه و همیشه در نمایش فونت های فارسی مشکلاتی رو بجود میاره.
یکی از راههای غلبه بر این مشکل (پیکسل ها و زائده های دور حروف) استفاده از خصوصیت -webkit-text-stroke-width هست که مخصوص موتور وب کیت می باشد.
این خصوصیت باعث میشه تا مرورگر کروم (و سافاری) رو مجبور کنه که متن رو به صورت Anti-Aliased نمایش بدن.
در ادامه باید از خصوصیت -webkit-text-stroke-width استفاده کنیم که باعث میشه به اندازه ی مقداری که ما معین کردیم ، متون رو با یک حاشیه نازک چند پیکسلی نمایش بده.
در استفاده از این خصوصیت یک مشکل اساسی وجود داره:
ما فقط می‌خوایم خصوصیت روی مرورگر کروم ویندوز اعمال بشه، اما روی تمام مرورگرهایی که از هسته وب‌کیت برای نمایش صفحات وب استفاده می‌کنن اعمال میشه، مثل سافاری در تمام سیستم عامل‌ها و موبایل، کروم در مک و لینوکس و … . و این اتفاق باعث میشه که فونت‌هایی که در پتلفرم‌های دیگه به خوبی نمایش داده می‌شن، دیگه زیبایی اولیه شون رو نداشته باشن.
برای حل این مشکل شما باید با یکی از روش‌های موجود، نسخه کروم در ویندوز رو تشخیص بدید، و بر اساس اون خط دوم کد بالا رو به فایل CSS تون اضافه کنید. یکی ازین راه‌ها استفاده از اسکریپتهای تشخیص قابلیت‌های مرورگر مثل Modernizr و یا اسکریپتهای تشخیص نسخه مرورگر هستن.
یکی از بهترین اسکریپتهای تشخیص نسخه مرورگر Browser Selector هست که این امکان رو به ما میده تا با استفاده از CSS Selector ها نوع مرورگر رو تشخیص بدیم و برای اونها استایل مشخص کنیم.
برای مثال برای رفع مشکل فوق میتونیم همچنین CSS ایی رو بنویسیم:
body{
-webkit-font-smoothing: antialiased;
}
.win.chrome body{
-webkit-text-stroke-width: 0.3px;
}
به خط دوم توجه کنید ، سلکتور .win.chrome باعث میشه که این خصوصیت فقط روی مرورگر کروم ویندوز اعمال بشه.
واقعا راهکار جالبی رو ارائه داده بود.
برای استفاده از Browser Selector ها میبایست شما یک فایل جاوا اسکریپت به صفحه تون اضافه کنید که میتونید از این آدرس دانلود (https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js)کنید.
راهنمای کامل استفاده از روش رو میتونید از اینجا مطالعه (http://rafael.adm.br/css_browser_selector/) کنید.
یکی از راههای غلبه بر این مشکل (پیکسل ها و زائده های دور حروف) استفاده از خصوصیت -webkit-text-stroke-width هست که مخصوص موتور وب کیت می باشد.
این خصوصیت باعث میشه تا مرورگر کروم (و سافاری) رو مجبور کنه که متن رو به صورت Anti-Aliased نمایش بدن.
در ادامه باید از خصوصیت -webkit-text-stroke-width استفاده کنیم که باعث میشه به اندازه ی مقداری که ما معین کردیم ، متون رو با یک حاشیه نازک چند پیکسلی نمایش بده.
در استفاده از این خصوصیت یک مشکل اساسی وجود داره:
ما فقط می‌خوایم خصوصیت روی مرورگر کروم ویندوز اعمال بشه، اما روی تمام مرورگرهایی که از هسته وب‌کیت برای نمایش صفحات وب استفاده می‌کنن اعمال میشه، مثل سافاری در تمام سیستم عامل‌ها و موبایل، کروم در مک و لینوکس و … . و این اتفاق باعث میشه که فونت‌هایی که در پتلفرم‌های دیگه به خوبی نمایش داده می‌شن، دیگه زیبایی اولیه شون رو نداشته باشن.
برای حل این مشکل شما باید با یکی از روش‌های موجود، نسخه کروم در ویندوز رو تشخیص بدید، و بر اساس اون خط دوم کد بالا رو به فایل CSS تون اضافه کنید. یکی ازین راه‌ها استفاده از اسکریپتهای تشخیص قابلیت‌های مرورگر مثل Modernizr و یا اسکریپتهای تشخیص نسخه مرورگر هستن.
یکی از بهترین اسکریپتهای تشخیص نسخه مرورگر Browser Selector هست که این امکان رو به ما میده تا با استفاده از CSS Selector ها نوع مرورگر رو تشخیص بدیم و برای اونها استایل مشخص کنیم.
برای مثال برای رفع مشکل فوق میتونیم همچنین CSS ایی رو بنویسیم:
body{
-webkit-font-smoothing: antialiased;
}
.win.chrome body{
-webkit-text-stroke-width: 0.3px;
}
به خط دوم توجه کنید ، سلکتور .win.chrome باعث میشه که این خصوصیت فقط روی مرورگر کروم ویندوز اعمال بشه.
واقعا راهکار جالبی رو ارائه داده بود.
برای استفاده از Browser Selector ها میبایست شما یک فایل جاوا اسکریپت به صفحه تون اضافه کنید که میتونید از این آدرس دانلود (https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js)کنید.
راهنمای کامل استفاده از روش رو میتونید از اینجا مطالعه (http://rafael.adm.br/css_browser_selector/) کنید.