विज़ुअल तौर पर स्टेबल मिक्स फ़ॉन्ट

अलग-अलग फ़ॉन्ट फ़ैमिली को मिक्स करते समय, "x-height" (छोटे अक्षरों की ऊंचाई) में अंतर की वजह से, एक फ़ॉन्ट दूसरे फ़ॉन्ट से काफ़ी छोटा या बड़ा दिख सकता है. उदाहरण के लिए, इनलाइन कोड स्निपेट डालते समय या अलग-अलग थीम के लिए फ़ॉन्ट फ़ैमिली बदलते समय. इस वजह से, टेक्स्ट को पढ़ने में मुश्किल हो सकती है और लेआउट में बदलाव हो सकते हैं.

font-size-adjust प्रॉपर्टी की मदद से, टेक्स्ट के विज़ुअल साइज़ को सामान्य किया जा सकता है. इसके लिए, फ़ॉन्ट के साइज़ को किसी खास फ़ॉन्ट मेट्रिक (आम तौर पर, x-हाइट) के हिसाब से अडजस्ट किया जाता है.

लागू करने के चरण

1. ज़रूरी: font-size-adjust को उन एलिमेंट पर लागू करें जहां फ़ॉन्ट की एकरूपता ज़रूरी है. जैसे, वेब फ़ॉन्ट का इस्तेमाल करने वाले कंटेनर या अलग-अलग फ़ॉन्ट फ़ैमिली वाले ब्लॉक.
2. ज़रूरी: एलिमेंट पर from-font कीवर्ड का इस्तेमाल करें, ताकि नेस्ट किए गए एलिमेंट में फ़ॉन्ट साइज़, प्राइमरी फ़ॉन्ट के अनुपात से अपने-आप मैच हो जाए.
3. ज़रूरी: font-size-adjust के लिए, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बदलने वाली कोई खास न्यूमेरिक वैल्यू इस्तेमाल करें (जैसे, font-size-adjust: 0.5). इससे, अलग-अलग थीम के फ़ॉन्ट के अनुपात को अलग-अलग सामान्य किया जा सकता है.

उदाहरण: x-हाइट को अपने-आप सामान्य करना

from-font का इस्तेमाल करना सबसे बेहतर तरीका है. यह पहले उपलब्ध फ़ॉन्ट से x-हाइट का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) निकालता है और उसे चाइल्ड एलिमेंट में मौजूद फ़ॉन्ट पर लागू करता है.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

उदाहरण: x-हाइट की कोई खास वैल्यू तय करना

जब अडजस्ट किए जाने वाले फ़ॉन्ट का साइज़, बेस फ़ॉन्ट के साइज़ पर निर्भर नहीं करता, तो x-हाइट को अडजस्ट करने के लिए कोई वैल्यू तय करें.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

फ़ॉलबैक रणनीतियां

ज़रूरी: जिन ब्राउज़र में font-size-adjust काम नहीं करता उनमें फ़ॉन्ट, अपनी सामान्य font-size वैल्यू पर रेंडर होंगे. आपको ऐसे ब्राउज़र के लिए फ़ॉलबैक की मान्य रणनीति उपलब्ध करानी होगी जो @supports ब्लॉक का इस्तेमाल नहीं करते. इससे, इस समस्या को कम किया जा सकता है:

• font-size-adjust के साथ काम करने वाले फ़ॉन्ट का पता लगाने के लिए, @supports not (font-size-adjust: from-font) का इस्तेमाल करें.साथ ही, फ़ॉलबैक स्टाइल उपलब्ध कराएं. जैसे, अडजस्ट की गई लाइन-हाइट या फ़ॉन्ट-साइज़.
• ऐसे फ़ॉन्ट चुनें जिनकी x-हाइट, आपके मुख्य फ़ॉन्ट से मिलती-जुलती हो.
• वैकल्पिक और नेस्ट की गई फ़ॉन्ट फ़ैमिली के लिए, खास font-size और line-height ओवरराइड लागू करें.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}