جایگزینی فونت بهبود یافته

کیتی همپنیوس
Katie Hempenius
X

خلاصه

این مقاله یک بررسی عمیق در مورد فونت‌های جایگزین و APIهای size-adjust ، ascent-override ، descent-override و line-gap-override است. این API ها استفاده از فونت های محلی را برای ایجاد چهره های فونت بازگشتی که دقیقاً یا دقیقاً با ابعاد یک فونت وب مطابقت دارند، ممکن می سازند. این تغییرات طرح‌بندی ناشی از تعویض فونت را کاهش می‌دهد یا حذف می‌کند.

اگر ترجیح می دهید از خواندن این مقاله صرف نظر کنید، اینها برخی از ابزارهایی هستند که می توانید برای شروع استفاده فوری از این API ها استفاده کنید:

ابزارهای چارچوب:

  • @next/font : از Next 13 شروع می‌شود، next/font به‌طور خودکار از حذف متریک فونت و size-adjust برای ارائه فونت‌های جایگزین استفاده می‌کند.
  • @nuxtjs/fontaine : از Nuxt 3 شروع می‌شود، می‌توانید nuxt/fontaine برای تولید خودکار و درج فونت‌های جایگزین در برگه‌های سبک مورد استفاده توسط برنامه Nuxt خود استفاده کنید.

ابزارهای غیر چارچوبی:

  • Fontaine : Fontaine کتابخانه‌ای است که به طور خودکار فونت‌هایی را تولید و درج می‌کند که از لغو متریک فونت استفاده می‌کنند.
  • این مخزن شامل لغو متریک فونت برای همه فونت‌هایی است که توسط فونت‌های Google میزبانی می‌شوند. این مقادیر را می توان کپی و در شیوه نامه های شما جایگذاری کرد.

پس زمینه

فونت بازگشتی یک صورت فونتی است که زمانی استفاده می‌شود که فونت اصلی هنوز بارگذاری نشده باشد یا علامت‌های حروف لازم برای ارائه محتوای صفحه وجود نداشته باشد. به عنوان مثال، CSS زیر نشان می دهد که خانواده فونت sans-serif باید به عنوان فونت بازگشتی برای "Roboto" استفاده شود.

font-family: "Roboto" , sans-serif;

از فونت های بازگشتی می توان برای رندر سریعتر متن استفاده کرد (یعنی با استفاده از font-display: swap ). در نتیجه، محتوای صفحه زودتر قابل خواندن و مفید است - با این حال، از نظر تاریخی، این به قیمت بی‌ثباتی طرح‌بندی تمام شده است: تغییرات طرح‌بندی معمولاً زمانی اتفاق می‌افتد که یک فونت بازگشتی با فونت وب جایگزین شود. با این حال، APIهای جدیدی که در زیر مورد بحث قرار می‌گیرند، می‌توانند این مشکل را با ایجاد امکان ایجاد چهره‌های فونت بازگشتی که همان مقدار فضای فونت وب خود را اشغال می‌کنند، کاهش داده یا حذف کنند.

جایگزینی فونت بهبود یافته

دو روش ممکن برای ایجاد فونت‌های جایگزین "بهبود" وجود دارد. رویکرد ساده‌تر فقط از API لغو متریک فونت استفاده می‌کند. رویکرد پیچیده‌تر (اما قوی‌تر) از API لغو متریک فونت و size-adjust استفاده می‌کند. این مقاله هر دوی این رویکردها را توضیح می دهد.

نحوه عملکرد نادیده گرفتن متریک فونت

مقدمه

نادیده گرفتن متریک فونت راهی برای نادیده گرفتن صعود، نزول و شکاف خط یک فونت ارائه می دهد:

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

نمودار صعود، نزول و شکاف خط فونت را نشان می دهد.

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

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

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

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

محاسبه متریک فونت لغو می شود

معادلات زیر نادیده گرفتن متریک فونت برای یک فونت وب معین را نشان می دهد. مقادیر نادیده گرفتن متریک فونت به جای اعشار باید به صورت درصد نوشته شوند (مثلاً 105% ).

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

به عنوان مثال، این موارد لغو متریک فونت برای فونت Poppins هستند:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

مقادیر ascent ، descent ، line-gap و unitsPerEm همگی از ابرداده فونت وب می آیند. بخش بعدی این مقاله نحوه به دست آوردن این مقادیر را توضیح می دهد.

خواندن جداول فونت

فراداده یک فونت (به طور خاص، جداول فونت آن) حاوی تمام اطلاعاتی است که برای محاسبه موارد لغو متریک فونت آن نیاز دارید.

اسکرین شات از کادر محاوره ای Font Information در FontForge. کادر محاوره‌ای معیارهای فونت مانند 'Typo Ascent'، 'Typo Descent' و 'Typo Line Gap' را نمایش می‌دهد.
استفاده از FontForge برای مشاهده فراداده فونت

در اینجا چند ابزار وجود دارد که می توانید برای خواندن فراداده یک فونت استفاده کنید:

  • fontkit یک موتور فونت است که برای Node.js ساخته شده است. این قطعه کد نحوه استفاده از fontkit را برای محاسبه نادیده گرفتن متریک فونت نشان می دهد.
  • Capsize یک کتابخانه اندازه و طرح بندی فونت است. Capsize یک API برای دریافت اطلاعات در مورد معیارهای مختلف فونت ارائه می دهد.
  • fontdrop.info وب سایتی است که به شما امکان می دهد جداول فونت و سایر اطلاعات مربوط به فونت را از مرورگر مشاهده کنید.
  • Font Forge یک ویرایشگر فونت دسکتاپ محبوب است. برای مشاهده ascent ، descent و line-gap : کادر گفتگوی Font Info را باز کنید، منوی OS/2 را انتخاب کنید، سپس برگه Metrics را انتخاب کنید. برای مشاهده UPM : کادر گفتگوی Font Info را باز کنید، سپس منوی General را انتخاب کنید.

درک جداول فونت

ممکن است متوجه شده باشید که مفاهیمی مانند «صعود» با معیارهای متعددی ارجاع می‌شوند - برای مثال، معیارهای hheaAscent ، typoAscent و winAscent وجود دارد. این نتیجه سیستم‌های عامل مختلف است که رویکردهای متفاوتی برای ارائه فونت دارند: برنامه‌های دستگاه‌های OSX معمولاً از معیارهای فونت hhea* استفاده می‌کنند – در حالی که برنامه‌های دستگاه‌های ویندوز معمولاً از typo* (همچنین به عنوان sTypo* نامیده می‌شود) یا متریک فونت win* استفاده می‌کنند.

بسته به فونت، مرورگر و سیستم عامل، یک فونت با استفاده از معیارهای hhea ، typo یا win ارائه می شود.

مک ویندوز
کروم از معیارهای جدول "hhea" استفاده می کند. اگر «USE_TYPO_METRICS» تنظیم شده باشد، از معیارهای جدول "اشتباه تایپی" استفاده می کند، در غیر این صورت از معیارهای جدول "برد" استفاده می کند.
فایرفاکس اگر «USE_TYPO_METRICS» تنظیم شده باشد، از معیارهای جدول "اشتباه تایپی" استفاده می کند، در غیر این صورت از معیارهای جدول "hhea" استفاده می کند. اگر «USE_TYPO_METRICS» تنظیم شده باشد، از معیارهای جدول "اشتباه تایپی" استفاده می کند، در غیر این صورت از معیارهای جدول "برد" استفاده می کند.
سافاری از معیارهای جدول "hhea" استفاده می کند. اگر «USE_TYPO_METRICS» تنظیم شده باشد، از معیارهای جدول "اشتباه تایپی" استفاده می کند، در غیر این صورت از معیارهای جدول "برد" استفاده می کند.

برای اطلاعات بیشتر در مورد نحوه عملکرد معیارهای فونت در سیستم عامل ها، به این مقاله در مورد معیارهای عمودی مراجعه کنید.

سازگاری بین دستگاه ها

برای اکثریت قریب به اتفاق فونت ها (به عنوان مثال، 90٪ از فونت های میزبانی شده توسط فونت های Google) معیارهای فونت را می توان با خیال راحت بدون اطلاع از سیستم عامل کاربر مورد استفاده قرار داد: به عبارت دیگر، برای این فونت ها مقادیر ascent-override ، descent-override صرف نظر از اینکه معیارهای hhea ، typo ، یا win ، descent-override و linegap-override دقیقاً یکسان می مانند اعمال شود. این مخزن اطلاعاتی را در مورد فونت‌هایی که این کار انجام می‌شود و برای کدام فونت‌ها اعمال نمی‌شود، ارائه می‌کند.

اگر از فونتی استفاده می‌کنید که نیاز به استفاده از مجموعه‌های جداگانه‌ای از لغو متریک فونت برای دستگاه‌های OSX و Windows دارد، استفاده از لغو متریک فونت و size-adjust تنها در صورتی توصیه می‌شود که بتوانید شیوه‌نامه‌های خود را بر اساس سیستم عامل کاربر تغییر دهید.

استفاده از لغو متریک فونت

از آنجایی که نادیده گرفتن متریک فونت با استفاده از اندازه‌گیری‌هایی که از ابرداده‌های فونت وب (و نه فونت بازگشتی) به دست می‌آیند، محاسبه می‌شوند، بدون توجه به اینکه کدام فونت به‌عنوان فونت بازگشتی استفاده می‌شود، ثابت می‌مانند. به عنوان مثال:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

تنظیم اندازه چگونه کار می کند

مقدمه

توصیفگر CSS size-adjust عرض و ارتفاع حروف فونت را به تناسب مقیاس می کند. به عنوان مثال، size-adjust: 200% حروف فونت را به دو برابر اندازه اصلی خود مقیاس می دهد. size-adjust: 50% حروف قلم را به نصف اندازه اصلی خود مقیاس می دهد.

نموداری که نتایج استفاده از 'size-adjust: 50%' و 'size-adjust: 200%' را نشان می دهد.

size-adjust به خودی خود کاربردهای محدودی برای بهبود فونت‌های جایگزین دارد: در بیشتر موارد، یک فونت بازگشتی برای تطبیق با فونت وب باید کمی باریک یا بزرگ شود (به‌جای مقیاس‌بندی متناسب). با این حال، ترکیب size-adjust با نادیده گرفتن متریک فونت این امکان را فراهم می کند که هر دو فونت را به صورت افقی و عمودی با یکدیگر مطابقت دهند.

به این صورت است که size-adjust در شیوه نامه ها استفاده می شود:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

به دلیل نحوه محاسبه size-adjust (که در بخش بعدی توضیح داده شده است)، مقدار size-adjust (و متریک فونت مربوطه لغو می شود) بسته به اینکه از کدام فونت بازگشتی استفاده می شود، تغییر می کند:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

محاسبه تنظیم اندازه و لغو متریک فونت

این معادلات برای محاسبه size-adjust و تغییر متریک فونت هستند:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

بیشتر این ورودی ها (یعنی صعود، فرود و شکاف خط) را می توان مستقیماً از ابرداده فونت وب خواند. با این حال، avgCharacterWidth باید تقریبی شود.

میانگین عرض کاراکتر تقریبی

به طور کلی، میانگین عرض کاراکتر را فقط می‌توان تقریبی کرد – اما سناریوهایی وجود دارد که می‌توان آن را دقیقاً محاسبه کرد: به عنوان مثال، هنگام استفاده از فونت تک‌فاصله یا زمانی که محتوای یک رشته متن از قبل مشخص است.

نمونه ای از یک رویکرد ساده لوحانه برای محاسبه avgCharacterWidth این است که میانگین عرض همه کاراکترهای [az\s] را در نظر بگیریم.

نمودار مقایسه عرض حروف ربات [a-zs] منفرد.
عرض حروف ربات

با این حال، وزن دادن به همه کاراکترها به طور یکسان احتمالاً به اندازه عرض حروف پرکاربرد (مثلاً e ) کمتر وزن و در عرض حروف کم استفاده (مثلا z ) اضافه وزن خواهد داشت.

یک رویکرد پیچیده‌تر که دقت را بهبود می‌بخشد، در نظر گرفتن فرکانس حروف و در عوض محاسبه عرض میانگین وزنی فرکانس کاراکترهای [az\s] است. این مقاله مرجع خوبی برای فراوانی حروف و میانگین طول کلمات متون انگلیسی است.

نموداری که تعداد حروف انگلیسی را نشان می دهد.
فراوانی حروف در انگلیسی

انتخاب یک رویکرد

دو روش مورد بحث در این مقاله هر کدام دارای مزایا و معایب خود هستند:

  • استفاده از نادیده گرفتن متریک فونت به خودی خود روش خوبی برای استفاده در صورتی است که با بهینه سازی فونت های جایگزین خود شروع کرده اید. اگرچه این ساده‌تر از این دو رویکرد است - معمولاً به اندازه‌ای قدرتمند است که میزان تغییرات طرح‌بندی مربوط به فونت را به میزان قابل توجهی کاهش دهد.

  • از سوی دیگر، اگر می‌خواهید دقت بیشتری داشته باشید و مایلید کمی کار و آزمایش بیشتری انجام دهید، ترکیب size-adjust روش خوبی برای استفاده است. هنگامی که این رویکرد به درستی اجرا شود، می تواند به طور موثری تغییرات طرح بندی مربوط به فونت را حذف کند.

انتخاب فونت های بازگشتی

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

Arial فونت بازگشتی پیشنهادی برای فونت‌های sans-serif و Times New Roman فونت بازگشتی توصیه‌شده برای فونت‌های سریف است. با این حال، هیچ یک از این فونت ها در اندروید موجود نیست ( Roboto تنها فونت سیستم در اندروید است).

مثال زیر از سه فونت بازگشتی برای اطمینان از پوشش گسترده دستگاه استفاده می‌کند: یک فونت بازگشتی که دستگاه‌های Windows/Mac را هدف قرار می‌دهد، یک فونت بازگشتی که دستگاه‌های Android را هدف قرار می‌دهد، و یک فونت بازگشتی که از خانواده فونت‌های عمومی استفاده می‌کند.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

درخواست بازخورد

لطفاً اگر بازخوردی در مورد تجربه خود در استفاده از لغو متریک فونت و size-adjust دارید، تماس بگیرید.