vazirmatn
vazirmatn copied to clipboard
وسط نبودن کاراکتر ها موقع استفاده از حروف لاتین
توی نسخه وب و موقع هایلایت کردن نوشته ها:
کاراکتر های فارسی دقیقا وسط هستن ولی موقع استفاده از کاراکتر های لاتین یکم بالاتر قرار میگیرن.


معمولا این مشکل رو با margin و یا line-height برطرف میکنم ولی وقتی قراره هم زبان فارسی هم انگلیسی ساپورت بشه بمشکل میخوره متاسفانه.
همانطور که فرمودید فارسی مشکلی نداره. این تفاوت در ارتفاع فارسی و لاتین مشکل رایجی هست: #264 #110 #209 #150
پیشنهاد من اینه که در وضعیت لاتین، از فونت روبوتو یا هر فونت لاتین دیگری استفاده کنید. یعنی در شرایطی که اولویت با لاتین باشه:
.latin_el {
font-family: Roboto, Vazirmatn, sans-serif;
}
در حالت فارسی:
.farsi_el {
font-family: Vazirmatn, Roboto, sans-serif;
}
همانطور که فرمودید فارسی مشکلی نداره. این تفاوت در ارتفاع فارسی و لاتین مشکل رایجی هست: #264 #110 #209 #150
پیشنهاد من اینه که در وضعیت لاتین، از فونت روبوتو یا هر فونت لاتین دیگری استفاده کنید. یعنی در شرایطی که اولویت با لاتین باشه:
.latin_el { font-family: Roboto, Vazirmatn, sans-serif; }
در حالت فارسی:
.farsi_el { font-family: Vazirmatn, Roboto, sans-serif; }
و البته که امکانش هست از unicode-range ها توی CSS استفاده کنن تا فونت برای زبان خاصی ست بشه بجای اینکه از کلاس های مختلف استفاده کنن :)
ببخشید یه راهحلی هست برای حروف الفبای لاتین به جای روبوتو از فونت Poppins استفاده بشه. مشکل کمتری بابت line hight داره فکر کنم.
من یک راه حلی پیدا کردم. به این صورت هست که unicode range اون کاراکتر هایی که میخوام فونت وزیر روشون اعمال بشه رو موقع تعریف font توی css قرار میدم. در این صورت اگر کاراکتری وارد بشه که unicode دیگه ای داشته باشه فونت وزیر روش اعمال نمیشه و فونت دومی که تعریف کردید به صورت خودکار اعمال میشه.
یونی کد رنجی که باید قرار بدید: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039
نمونه کد:
@font-face {
font-family: "Vazir";
font-weight: 500;
src: url(Vazirmatn-Medium.woff2);
unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
}
استفاده از فونت:
.css_class{
font-family: "Vazir, arial"
}