ಟೈಪೊಗ್ರಾಫಿಕ್ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡುವುದು: CSS @font-feature-values ಕುರಿತ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ವೆಬ್ ವಿನ್ಯಾಸದ ಕ್ಷೇತ್ರದಲ್ಲಿ, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ರೂಪಿಸುವಲ್ಲಿ ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ತಿಳಿಸುವಲ್ಲಿ ಟೈಪೊಗ್ರಫಿಯು ಪ್ರಮುಖ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ. font-family, font-size, ಮತ್ತು font-weight ನಂತಹ ಮೂಲಭೂತ CSS ಫಾಂಟ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮೂಲ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸಿದರೂ, @font-feature-values ನಿಯಮವು ಸುಧಾರಿತ ಟೈಪೊಗ್ರಫಿಕ್ ಕಸ್ಟಮೈಸೇಶನ್ ಜಗತ್ತಿಗೆ ಒಂದು ದ್ವಾರವನ್ನು ನೀಡುತ್ತದೆ. ಈ ನಿಯಮವು ಓಪನ್‌ಟೈಪ್ ಫಾಂಟ್‌ಗಳ ಗುಪ್ತ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ವಿನ್ಯಾಸಕರು ಸುಧಾರಿತ ಸೌಂದರ್ಯ, ಓದುವಿಕೆ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಗಾಗಿ ನಿರ್ದಿಷ್ಟ ಫಾಂಟ್ ಫೀಚರ್‌ಗಳನ್ನು ಸೂಕ್ಷ್ಮವಾಗಿ ಹೊಂದಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು @font-feature-values ನ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ, ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್, ಬಳಕೆ, ಮತ್ತು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅದರ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

@font-feature-values ನ ನಿರ್ದಿಷ್ಟತೆಗಳಿಗೆ ಹೋಗುವ ಮೊದಲು, ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳ ಆಧಾರವಾಗಿರುವ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಓಪನ್‌ಟೈಪ್ ಒಂದು ವ್ಯಾಪಕವಾಗಿ ಅಳವಡಿಸಿಕೊಂಡ ಫಾಂಟ್ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದ್ದು, ಇದು ತನ್ನ ಹಿಂದಿನ ಟ್ರೂಟೈಪ್ ಮತ್ತು ಪೋಸ್ಟ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ. ಇದು ಗ್ಲಿಫ್ ರೆಂಡರಿಂಗ್‌ನ ವಿವಿಧ ಅಂಶಗಳನ್ನು ನಿಯಂತ್ರಿಸುವ ಶ್ರೀಮಂತ ಫೀಚರ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿದೆ, ಅವುಗಳೆಂದರೆ:

• ಲಿಗೇಚರ್‌ಗಳು: ಸುಧಾರಿತ ಸೌಂದರ್ಯ ಮತ್ತು ಓದುವಿಕೆಗಾಗಿ ಎರಡು ಅಥವಾ ಹೆಚ್ಚು ಅಕ್ಷರಗಳನ್ನು ಒಂದೇ ಗ್ಲಿಫ್‌ಗೆ ಸಂಯೋಜಿಸುವುದು (ಉದಾ., 'fi', 'fl').
• ಪರ್ಯಾಯ ಗ್ಲಿಫ್‌ಗಳು: ನಿರ್ದಿಷ್ಟ ಅಕ್ಷರಗಳ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಒದಗಿಸುವುದು, ಇದು ಶೈಲಿಯ ಆಯ್ಕೆಗಳಿಗೆ ಅಥವಾ ಸಾಂದರ್ಭಿಕ ಹೊಂದಾಣಿಕೆಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
• ಶೈಲಿಯ ಸೆಟ್‌ಗಳು: ಸಂಬಂಧಿತ ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಒಂದೇ ಹೆಸರಿನಡಿಯಲ್ಲಿ ಗುಂಪು ಮಾಡುವುದು, ವಿನ್ಯಾಸಕರು ಸುಲಭವಾಗಿ ಸ್ಥಿರವಾದ ಸೌಂದರ್ಯದ ಚಿಕಿತ್ಸೆಗಳನ್ನು ಅನ್ವಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ಸಂಖ್ಯಾ ಶೈಲಿಗಳು: ಲೈನಿಂಗ್ ಫಿಗರ್‌ಗಳು, ಓಲ್ಡ್‌ಸ್ಟೈಲ್ ಫಿಗರ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಯುಲರ್ ಫಿಗರ್‌ಗಳಂತಹ ವಿಭಿನ್ನ ಸಂಖ್ಯಾ ಶೈಲಿಗಳನ್ನು ನೀಡುವುದು, ಪ್ರತಿಯೊಂದೂ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
• ಭಿನ್ನರಾಶಿಗಳು: ಸೂಕ್ತವಾದ ಅಂಶ, ಛೇದ, ಮತ್ತು ಭಿನ್ನರಾಶಿ ಬಾರ್ ಗ್ಲಿಫ್‌ಗಳೊಂದಿಗೆ ಭಿನ್ನರಾಶಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುವುದು.
• ಸಣ್ಣ ಕ್ಯಾಪಿಟಲ್ಸ್: ಸಣ್ಣಕ್ಷರಗಳನ್ನು ದೊಡ್ಡಕ್ಷರಗಳ ಸಣ್ಣ ಆವೃತ್ತಿಗಳಾಗಿ ಪ್ರದರ್ಶಿಸುವುದು.
• ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳು: ಗ್ಲಿಫ್ ಆಕಾರಗಳನ್ನು ಅವುಗಳ ಸುತ್ತಲಿನ ಅಕ್ಷರಗಳ ಆಧಾರದ ಮೇಲೆ ಹೊಂದಿಸುವುದು, ಓದುವಿಕೆ ಮತ್ತು ದೃಶ್ಯ ಸಾಮರಸ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವುದು.
• ಸ್ವಾಶ್‌ಗಳು: ಕೆಲವು ಗ್ಲಿಫ್‌ಗಳಿಗೆ ಅಲಂಕಾರಿಕ ವಿಸ್ತರಣೆಗಳನ್ನು ಸೇರಿಸುವುದು, ಸೊಬಗು ಮತ್ತು ಆಕರ್ಷಣೆಯನ್ನು ನೀಡುವುದು.
• ಕರ್ನಿಂಗ್: ದೃಶ್ಯ ಸಮತೋಲನವನ್ನು ಸುಧಾರಿಸಲು ನಿರ್ದಿಷ್ಟ ಅಕ್ಷರ ಜೋಡಿಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಸರಿಹೊಂದಿಸುವುದು.

ಈ ಫೀಚರ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಫಾಂಟ್ ಫೈಲ್‌ನಲ್ಲಿಯೇ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. @font-feature-values ಈ ಫೀಚರ್‌ಗಳನ್ನು ನೇರವಾಗಿ CSS ನಿಂದ ಪ್ರವೇಶಿಸಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಟೈಪೊಗ್ರಫಿಕ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಸಾಟಿಯಿಲ್ಲದ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ.

CSS @font-feature-values ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ

@font-feature-values ಅಟ್-ರೂಲ್ ನಿರ್ದಿಷ್ಟ ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಗಾಗಿ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ CSS ನಲ್ಲಿ ಹೆಚ್ಚು ಮಾನವ-ಓದಬಲ್ಲ ಹೆಸರುಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

            @font-feature-values <font-family-name> {
  <feature-tag-value> {
    <feature-name>: <feature-value>
  }
}

            

              
                Copy
              
            
          

ಪ್ರತಿ ಘಟಕವನ್ನು ವಿಂಗಡಿಸೋಣ:

• @font-feature-values: ಫೀಚರ್ ಮೌಲ್ಯಗಳ ವ್ಯಾಖ್ಯಾನವನ್ನು ಪ್ರಾರಂಭಿಸುವ ಅಟ್-ರೂಲ್.
• <font-family-name>: ಈ ಫೀಚರ್ ಮೌಲ್ಯಗಳು ಅನ್ವಯವಾಗುವ ಫಾಂಟ್ ಕುಟುಂಬದ ಹೆಸರು (ಉದಾ., 'MyCustomFont', 'Arial'). ಇದು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಫೀಚರ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಫಾಂಟ್ ಬಳಸುವ ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• <feature-tag-value>: ನಿರ್ದಿಷ್ಟ ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್ ಟ್ಯಾಗ್‌ಗಾಗಿ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಒಂದು ಬ್ಲಾಕ್.
• <feature-tag>: ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್ ಅನ್ನು ಗುರುತಿಸುವ ನಾಲ್ಕು-ಅಕ್ಷರದ ಟ್ಯಾಗ್ (ಉದಾ., ಲಿಗೇಚರ್‌ಗಳಿಗಾಗಿ liga, ಸಣ್ಣ ಕ್ಯಾಪಿಟಲ್‌ಗಳಿಗಾಗಿ smcp, ಸಾಂದರ್ಭಿಕ ಸ್ವಾಶ್‌ಗಳಿಗಾಗಿ cswh). ಈ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಓಪನ್‌ಟೈಪ್ ನಿರ್ದಿಷ್ಟತೆಯಿಂದ ಪ್ರಮಾಣೀಕರಿಸಲಾಗಿದೆ ಮತ್ತು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ನೀವು ಓಪನ್‌ಟೈಪ್ ದಸ್ತಾವೇಜಿನಲ್ಲಿ ಮತ್ತು ವಿವಿಧ ಆನ್‌ಲೈನ್ ಸಂಪನ್ಮೂಲಗಳಲ್ಲಿ ಈ ಟ್ಯಾಗ್‌ಗಳ ಸಮಗ್ರ ಪಟ್ಟಿಗಳನ್ನು ಕಾಣಬಹುದು.
• <feature-name>: ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಾಗಿ ನೀವು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಕ್ಕೆ ನಿಯೋಜಿಸುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರು. ನಿಮ್ಮ CSS ನಿಯಮಗಳಲ್ಲಿ ನೀವು ಬಳಸುವ ಹೆಸರು ಇದಾಗಿದೆ. ಅರ್ಥಪೂರ್ಣ ಮತ್ತು ನೆನಪಿಡಲು ಸುಲಭವಾದ ಹೆಸರುಗಳನ್ನು ಆರಿಸಿ.
• <feature-value>: ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ನ ನಿಜವಾದ ಮೌಲ್ಯ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಬೂಲಿಯನ್ ಫೀಚರ್‌ಗಳಿಗೆ on ಅಥವಾ off ಆಗಿರುತ್ತದೆ, ಅಥವಾ ಮೌಲ್ಯಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಸ್ವೀಕರಿಸುವ ಫೀಚರ್‌ಗಳಿಗೆ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

@font-feature-values ನ ಶಕ್ತಿಯನ್ನು ವಿವರಿಸಲು, ಹಲವಾರು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಗಣಿಸೋಣ:

1. ಡಿಸ್ಕ್ರಿಷನರಿ ಲಿಗೇಚರ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದು

ಡಿಸ್ಕ್ರಿಷನರಿ ಲಿಗೇಚರ್‌ಗಳು ಐಚ್ಛಿಕ ಲಿಗೇಚರ್‌ಗಳಾಗಿದ್ದು, ಕೆಲವು ಅಕ್ಷರ ಸಂಯೋಜನೆಗಳ ಸೌಂದರ್ಯದ ಆಕರ್ಷಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ. ಅವುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನೀವು ಈ ರೀತಿ ಫೀಚರ್ ಮೌಲ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

            @font-feature-values "MyCustomFont" {
  @discretionary-ligatures {
    common-ligatures: on;
  }
}

.my-text {
  font-family: "MyCustomFont";
  font-variant-alternates: discretionary-ligatures;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು dlig (ಡಿಸ್ಕ್ರಿಷನರಿ ಲಿಗೇಚರ್‌ಗಳು) ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಾಗಿ common-ligatures ಎಂಬ ಫೀಚರ್ ಮೌಲ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದೇವೆ. ನಂತರ ನಾವು font-variant-alternates ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಫೀಚರ್ ಮೌಲ್ಯವನ್ನು .my-text ಕ್ಲಾಸ್‌ಗೆ ಅನ್ವಯಿಸುತ್ತೇವೆ. ಗಮನಿಸಿ: ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ font-variant-ligatures ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು. ನಿಯೋಜಿಸುವ ಮೊದಲು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಬೇಕು.

2. ಶೈಲಿಯ ಸೆಟ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದು

ಶೈಲಿಯ ಸೆಟ್‌ಗಳು ನಿಮ್ಮ ಪಠ್ಯಕ್ಕೆ ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳ ಸಂಗ್ರಹಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಶೀರ್ಷಿಕೆಗಳು ಅಥವಾ ಬಾಡಿ ಟೆಕ್ಸ್ಟ್‌ಗಾಗಿ ನಿರ್ದಿಷ್ಟ ಶೈಲಿಯ ಸೆಟ್ ಅನ್ನು ಬಳಸಲು ಬಯಸಬಹುದು.

            @font-feature-values "MySerifFont" {
  @stylistic-sets {
    alternate-a: ss01;
    elegant-numbers: ss02;
  }
}

.heading {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(alternate-a);
}

.body-text {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(elegant-numbers);
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ನಾವು ಎರಡು ಶೈಲಿಯ ಸೆಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದೇವೆ: alternate-a (ss01 ಗೆ ಮ್ಯಾಪ್ ಮಾಡಲಾಗಿದೆ) ಮತ್ತು elegant-numbers (ss02 ಗೆ ಮ್ಯಾಪ್ ಮಾಡಲಾಗಿದೆ). ನಂತರ ನಾವು font-variant-alternates ಬಳಸಿ ಈ ಸೆಟ್‌ಗಳನ್ನು ವಿವಿಧ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತೇವೆ. ನಿರ್ದಿಷ್ಟ ಶೈಲಿಯ ಸೆಟ್ ಟ್ಯಾಗ್‌ಗಳು (ss01, ss02, ಇತ್ಯಾದಿ) ಫಾಂಟ್‌ನಲ್ಲಿಯೇ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಟ್ಟಿವೆ. ಲಭ್ಯವಿರುವ ಶೈಲಿಯ ಸೆಟ್‌ಗಳಿಗಾಗಿ ಫಾಂಟ್‌ನ ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ.

3. ಸಂಖ್ಯಾ ಶೈಲಿಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು

ಓಪನ್‌ಟೈಪ್ ಫಾಂಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವಿವಿಧ ಉದ್ದೇಶಗಳಿಗಾಗಿ ವಿಭಿನ್ನ ಸಂಖ್ಯಾ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಲೈನಿಂಗ್ ಫಿಗರ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಕೋಷ್ಟಕಗಳು ಮತ್ತು ಚಾರ್ಟ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಓಲ್ಡ್‌ಸ್ಟೈಲ್ ಫಿಗರ್‌ಗಳು ಬಾಡಿ ಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ಹೆಚ್ಚು ಮನಬಂದಂತೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತವೆ.

            @font-feature-values "MyProFont" {
  @styleset {
    tabular-numbers: tnum;
    proportional-oldstyle: pold;
  }
}

.table-data {
  font-family: "MyProFont";
  font-variant-alternates: styleset(tabular-numbers);
}

.body-text {
  font-family: "MyProFont";
  font-variant-alternates: styleset(proportional-oldstyle);
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಕೋಷ್ಟಕ ಡೇಟಾಗೆ tabular-numbers (tnum) ಮತ್ತು ಬಾಡಿ ಟೆಕ್ಸ್ಟ್‌ಗೆ proportional-oldstyle (pold) ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದು ಓದುವಿಕೆ ಮತ್ತು ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

4. ಬಹು ಫೀಚರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ನೀವು ಒಂದೇ font-variant-alternates ಘೋಷಣೆಯಲ್ಲಿ ಬಹು ಫೀಚರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು:

            @font-feature-values "MyComplexFont" {
  @styleset {
    historical-forms: hist;
    contextual-alternates: calt;
  }
  @discretionary-ligatures {
   rare-ligatures: dlig;
  }
}

.special-text {
  font-family: "MyComplexFont";
  font-variant-alternates: styleset(historical-forms) discretionary-ligatures(rare-ligatures);
}

            

              
                Copy
              
            
          

ಇದು ಏಕಕಾಲದಲ್ಲಿ ಬಹು ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ ಸಂಕೀರ್ಣ ಟೈಪೊಗ್ರಫಿಕ್ ಪರಿಣಾಮಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಕೆಲವೊಮ್ಮೆ ಕ್ರಮವು ಮುಖ್ಯವಾಗಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬಯಸಿದ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು ಪ್ರಯೋಗ ಮಾಡುವುದು ಮುಖ್ಯ.

ನೇರ ಫೀಚರ್ ಪ್ರವೇಶಕ್ಕಾಗಿ font-variant-settings ಬಳಸುವುದು

@font-feature-values ಮತ್ತು font-variant-alternates ಉನ್ನತ ಮಟ್ಟದ ಅಮೂರ್ತತೆಯನ್ನು ಒದಗಿಸಿದರೆ, font-variant-settings ಪ್ರಾಪರ್ಟಿಯು ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳಿಗೆ ಅವುಗಳ ನಾಲ್ಕು-ಅಕ್ಷರದ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿ ನೇರ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಪ್ರಾಪರ್ಟಿಯು ಪೂರ್ವನಿರ್ಧರಿತ font-variant-alternates ಕೀವರ್ಡ್‌ಗಳಿಂದ ಆವರಿಸದ ಫೀಚರ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಅಥವಾ ನಿಮಗೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣ ಬೇಕಾದಾಗ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

font-variant-settings ಗಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೀಗಿದೆ:

            font-variant-settings: "<feature-tag>" <value>, "<feature-tag>" <value>, ...;

            

              
                Copy
              
            
          

ಉದಾಹರಣೆಗೆ, ಸಣ್ಣ ಕ್ಯಾಪಿಟಲ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನೀವು ಬಳಸಬಹುದು:

            .small-caps-text {
  font-family: "MyFont";
  font-variant-settings: "smcp" 1;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, "smcp" 1 ಸಣ್ಣ ಕ್ಯಾಪಿಟಲ್ಸ್ ಫೀಚರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ನೇರವಾಗಿ ಸೂಚಿಸುತ್ತದೆ. 1 ಮೌಲ್ಯವು ಸಾಮಾನ್ಯವಾಗಿ 'ಆನ್' ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಆದರೆ 0 'ಆಫ್' ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

ನೀವು ಒಂದೇ ಘೋಷಣೆಯಲ್ಲಿ ಬಹು ಫೀಚರ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು:

            .advanced-text {
  font-family: "MyFont";
  font-variant-settings: "liga" 0, "cswh" 1, "calt" 1;
}

            

              
                Copy
              
            
          

ಇದು ಪ್ರಮಾಣಿತ ಲಿಗೇಚರ್‌ಗಳನ್ನು (liga) ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಸಾಂದರ್ಭಿಕ ಸ್ವಾಶ್‌ಗಳನ್ನು (cswh) ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳನ್ನು (calt) ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

font-variant-settings ನ ಪ್ರಯೋಜನಗಳು:

• ನೇರ ನಿಯಂತ್ರಣ: ಪ್ರತ್ಯೇಕ ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ನಮ್ಯತೆ: font-variant-alternates ನಿಂದ ಆವರಿಸದ ಫೀಚರ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

font-variant-settings ನ ಅನಾನುಕೂಲಗಳು:

• ಕಡಿಮೆ ಓದಬಲ್ಲದು: ಕಚ್ಚಾ ಫೀಚರ್ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸುವುದು ಕೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಓದಬಲ್ಲದು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ.
• ಕಡಿಮೆ ನಿರ್ವಹಿಸಬಲ್ಲದು: ಫಾಂಟ್‌ನಲ್ಲಿನ ಫೀಚರ್ ಟ್ಯಾಗ್‌ಗಳಿಗೆ ಬದಲಾವಣೆಗಳು CSS ಅನ್ನು ನೇರವಾಗಿ ನವೀಕರಿಸುವ ಅಗತ್ಯವಿದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು: ಉತ್ತಮ ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಗಾಗಿ ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ @font-feature-values ಮತ್ತು font-variant-alternates ಬಳಸಿ. ನೇರ ಫೀಚರ್ ಪ್ರವೇಶ ಅಗತ್ಯವಿರುವ ಸಂದರ್ಭಗಳಿಗಾಗಿ font-variant-settings ಅನ್ನು ಮೀಸಲಿಡಿ.

ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು

@font-feature-values ಟೈಪೊಗ್ರಫಿಯ ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಗಣನೀಯವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದಾದರೂ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಣಾಮಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ತಪ್ಪಾಗಿ ಅನ್ವಯಿಸಲಾದ ಫೀಚರ್‌ಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಓದುವಿಕೆ ಮತ್ತು ಉಪಯುಕ್ತತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಕೆಲವು ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು ಇಲ್ಲಿವೆ:

• ಲಿಗೇಚರ್‌ಗಳು: ಲಿಗೇಚರ್‌ಗಳು ಸೌಂದರ್ಯವನ್ನು ಸುಧಾರಿಸಬಹುದಾದರೂ, ಅವು ಡಿಸ್ಲೆಕ್ಸಿಯಾ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಅಥವಾ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿರುವವರಿಗೆ ಓದುವಿಕೆಗೆ ಅಡ್ಡಿಯಾಗಬಹುದು. ಡಿಸ್ಕ್ರಿಷನರಿ ಲಿಗೇಚರ್‌ಗಳ ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ, ವಿಶೇಷವಾಗಿ ಬಾಡಿ ಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ. ಅಗತ್ಯವಿದ್ದರೆ ಲಿಗೇಚರ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸಿ.
• ಪರ್ಯಾಯ ಗ್ಲಿಫ್‌ಗಳು: ಅತಿಯಾದ ಅಲಂಕಾರಿಕ ಅಥವಾ ಅಸಾಂಪ್ರದಾಯಿಕ ಗ್ಲಿಫ್‌ಗಳನ್ನು ಬಳಸುವುದು ಪಠ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ. ಪರ್ಯಾಯ ಗ್ಲಿಫ್‌ಗಳು ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಸ್ಪಷ್ಟತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳು: ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತವೆಯಾದರೂ, ಕಳಪೆಯಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಪರ್ಯಾಯಗಳು ದೃಶ್ಯ ಅಸಂಗತತೆಗಳು ಮತ್ತು ಗೊಂದಲವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು. ವಿವಿಧ ಅಕ್ಷರ ಸಂಯೋಜನೆಗಳೊಂದಿಗೆ ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
• ಕಾಂಟ್ರಾಸ್ಟ್: ಬಳಸಿದ ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆಯ ನಡುವೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಮತ್ತು WCAG ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸಲು ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
• ಪರೀಕ್ಷೆ: ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪಠ್ಯವನ್ನು ಸರಿಯಾಗಿ ಅರ್ಥೈಸಲಾಗಿದೆಯೇ ಮತ್ತು ತಿಳಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಟೈಪೊಗ್ರಫಿಯನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ ಮತ್ತು ಸ್ಥಳೀಕರಣ

ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳು ವೈವಿಧ್ಯಮಯ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಬೆಂಬಲಿಸುವಲ್ಲಿ ನಿರ್ಣಾಯಕ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತವೆ. ಅನೇಕ ಫಾಂಟ್‌ಗಳು ನಿರ್ದಿಷ್ಟ ಭಾಷೆಗಳು ಅಥವಾ ಪ್ರದೇಶಗಳಿಗಾಗಿ ವಿಶೇಷವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಫೀಚರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಉದಾಹರಣೆಗೆ:

• ಅರೇಬಿಕ್: ಅರೇಬಿಕ್‌ಗಾಗಿ ಓಪನ್‌ಟೈಪ್ ಫಾಂಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸಾಂದರ್ಭಿಕ ಆಕಾರಕ್ಕಾಗಿ ಫೀಚರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ, ಇದು ಪದದೊಳಗಿನ ಅವುಗಳ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಗ್ಲಿಫ್‌ಗಳನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.
• ಇಂಡಿಕ್ ಲಿಪಿಗಳು: ಇಂಡಿಕ್ ಲಿಪಿಗಳಿಗಾಗಿ (ಉದಾ., ದೇವನಾಗರಿ, ಬಂಗಾಳಿ, ತಮಿಳು) ಫಾಂಟ್‌ಗಳು ಸಂಯುಕ್ತ ವ್ಯಂಜನಗಳು ಮತ್ತು ಸ್ವರ ಚಿಹ್ನೆಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ಸಂಕೀರ್ಣ ಆಕಾರ ನಿಯಮಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತವೆ.
• CJK (ಚೈನೀಸ್, ಜಪಾನೀಸ್, ಕೊರಿಯನ್): CJK ಭಾಷೆಗಳಿಗಾಗಿ ಓಪನ್‌ಟೈಪ್ ಫಾಂಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಾದೇಶಿಕ ಆದ್ಯತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಪರ್ಯಾಯ ಗ್ಲಿಫ್ ರೂಪಗಳು ಮತ್ತು ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳಿಗಾಗಿ ಫೀಚರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ, ಗುರಿ ಭಾಷೆಗಳನ್ನು ಸಮರ್ಪಕವಾಗಿ ಬೆಂಬಲಿಸುವ ಫಾಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು ಮತ್ತು ಸರಿಯಾದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಸೂಕ್ತವಾದ ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ನಿಮ್ಮ ಟೈಪೊಗ್ರಫಿ ಸಾಂಸ್ಕೃತಿಕವಾಗಿ ಸೂಕ್ಷ್ಮ ಮತ್ತು ಭಾಷಾಶಾಸ್ತ್ರೀಯವಾಗಿ ನಿಖರವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸ್ಥಳೀಯ ಭಾಷಿಕರು ಮತ್ತು ಟೈಪೊಗ್ರಫಿಕ್ ತಜ್ಞರೊಂದಿಗೆ ಸಮಾಲೋಚಿಸಿ.

ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ವಿವರಿಸುವ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

• ಅರೇಬಿಕ್: ಅನೇಕ ಅರೇಬಿಕ್ ಫಾಂಟ್‌ಗಳು ಪದದೊಳಗಿನ ಅಕ್ಷರಗಳ ಸ್ಥಾನವನ್ನು ಆಧರಿಸಿ ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಸಂಪರ್ಕಿಸಲು ಸಾಂದರ್ಭಿಕ ಪರ್ಯಾಯಗಳ (calt) ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿವೆ. ಈ ಫೀಚರ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದರಿಂದ ಪಠ್ಯವು ತುಂಡಾದ ಮತ್ತು ಓದಲಾಗದಂತಾಗುತ್ತದೆ.
• ಹಿಂದಿ (ದೇವನಾಗರಿ): ಸಂಯುಕ್ತ ವ್ಯಂಜನಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರೂಪಿಸಲು rlig (ಅಗತ್ಯ ಲಿಗೇಚರ್‌ಗಳು) ಫೀಚರ್ ಅತ್ಯಗತ್ಯ. ಇದಿಲ್ಲದೆ, ಸಂಕೀರ್ಣ ವ್ಯಂಜನ ಸಮೂಹಗಳು ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ, ಇದು ಪಠ್ಯವನ್ನು ಓದಲು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
• ಜಪಾನೀಸ್: ಜಪಾನೀಸ್ ಟೈಪೊಗ್ರಫಿಯು ಶೈಲಿಯ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಒದಗಿಸಲು ಮತ್ತು ವಿಭಿನ್ನ ಸೌಂದರ್ಯದ ಆದ್ಯತೆಗಳನ್ನು ಪೂರೈಸಲು ಅಕ್ಷರಗಳಿಗಾಗಿ ಪರ್ಯಾಯ ಗ್ಲಿಫ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಪರ್ಯಾಯ ಗ್ಲಿಫ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು font-variant-alternates ಅಥವಾ font-variant-settings ಅನ್ನು ಬಳಸಬಹುದು.

ನೀವು ಬೆಂಬಲಿಸುವ ಪ್ರತಿಯೊಂದು ಭಾಷೆಯ ನಿರ್ದಿಷ್ಟ ಟೈಪೊಗ್ರಫಿಕ್ ಅವಶ್ಯಕತೆಗಳನ್ನು ಸಂಶೋಧಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಫೀಚರ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಮರೆಯದಿರಿ. ನಿಖರ ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕವಾಗಿ ಸೂಕ್ತವಾದ ಟೈಪೊಗ್ರಫಿಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸ್ಥಳೀಯ ಭಾಷಿಕರೊಂದಿಗೆ ಪರೀಕ್ಷಿಸುವುದು ಅಮೂಲ್ಯವಾಗಿದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

@font-feature-values ಮತ್ತು ಸಂಬಂಧಿತ CSS ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಕಾಲಾನಂತರದಲ್ಲಿ ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಿದೆ, ಆದರೆ ಉತ್ಪಾದನೆಯಲ್ಲಿ ಈ ಫೀಚರ್‌ಗಳನ್ನು ಅವಲಂಬಿಸುವ ಮೊದಲು ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಗತ್ಯ. 2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಈ ಫೀಚರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ, ಅವುಗಳೆಂದರೆ:

• Chrome
• Firefox
• Safari
• Edge
• Opera

ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲದ ಕೊರತೆ ಇರಬಹುದು ಅಥವಾ ಅಸಮಂಜಸವಾದ ನಡವಳಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು. ಪ್ರಸ್ತುತ ಹೊಂದಾಣಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು "Can I use..." ನಂತಹ ವೆಬ್‌ಸೈಟ್ ಬಳಸಿ ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಫೀಚರ್ ಪ್ರಶ್ನೆಗಳನ್ನು (@supports) ಬಳಸಬಹುದು:

            @supports (font-variant-alternates: discretionary-ligatures) {
  .my-text {
    font-variant-alternates: discretionary-ligatures;
  }
}

            

              
                Copy
              
            
          

ಇದು ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸಿದರೆ ಮಾತ್ರ font-variant-alternates ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಟೈಪೊಗ್ರಫಿ

ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಸ್ಥಿರವಾದ ಟೈಪೊಗ್ರಫಿಕ್ ಶೈಲಿಗಳನ್ನು ರಚಿಸಲು @font-feature-values ಅನ್ನು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಮನಬಂದಂತೆ ಸಂಯೋಜಿಸಬಹುದು. ಕೇಂದ್ರೀಯವಾಗಿ ಫೀಚರ್ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಟೈಪೊಗ್ರಫಿಕ್ ಚಿಕಿತ್ಸೆಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಅನ್ವಯಿಸಲಾಗಿದೆಯೆಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಇದು ಬ್ರ್ಯಾಂಡ್ ಸ್ಥಿರತೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯೊಳಗೆ ನಿಮ್ಮ CSS ಅನ್ನು ನೀವು ಹೇಗೆ ರಚಿಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಇಲ್ಲಿದೆ ಒಂದು ಉದಾಹರಣೆ:

            /* typography.css */

@font-feature-values "MyBrandFont" {
  @stylistic-sets {
    brand-headline: ss01;
    brand-body: ss02;
  }
  @discretionary-ligatures {
    brand-ligatures: on;
  }
}

/* components.css */

.headline {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-headline);
}

.body {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-body);
}

.brand-text {
    font-family: "MyBrandFont";
    font-variant-alternates: discretionary-ligatures(brand-ligatures);
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @font-feature-values ಅನ್ನು ಪ್ರತ್ಯೇಕ typography.css ಫೈಲ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಆದರೆ ಕಾಂಪೊನೆಂಟ್ ಶೈಲಿಗಳನ್ನು components.css ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಈ ಕಾಳಜಿಗಳ ಪ್ರತ್ಯೇಕತೆಯು ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದು ಮಾಡುತ್ತದೆ.

ನಿಮ್ಮ ಫೀಚರ್ ಮೌಲ್ಯಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ (ಉದಾ., brand-headline, brand-body), ನೀವು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಸ್ವಯಂ-ದಾಖಲಿಸುವಂತೆ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತೀರಿ. ಇದು ದೊಡ್ಡ ತಂಡಗಳಲ್ಲಿ ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ, ಅಲ್ಲಿ ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಒಂದೇ ಯೋಜನೆಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತಿರಬಹುದು.

ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ

ವೆಬ್ ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದು ಬಹಳ ಮುಖ್ಯ. ದೊಡ್ಡ ಫಾಂಟ್ ಫೈಲ್‌ಗಳು ಪುಟ ಲೋಡ್ ಸಮಯದ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಇದು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:

• WOFF2 ಬಳಸಿ: WOFF2 ಅತ್ಯಂತ ದಕ್ಷ ಫಾಂಟ್ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದೆ ಮತ್ತು ಉತ್ತಮ ಸಂಕೋಚನವನ್ನು ನೀಡುತ್ತದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಇದನ್ನು ಬಳಸಿ.
• ಫಾಂಟ್‌ಗಳನ್ನು ಸಬ್‌ಸೆಟ್ ಮಾಡಿ: ನಿಮಗೆ ಫಾಂಟ್‌ನಿಂದ ಕೇವಲ ಅಕ್ಷರಗಳ ಉಪವಿಭಾಗ ಮಾತ್ರ ಬೇಕಾದರೆ, ಅದರ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಫಾಂಟ್ ಅನ್ನು ಸಬ್‌ಸೆಟ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ. FontForge ಮತ್ತು ಆನ್‌ಲೈನ್ ಫಾಂಟ್ ಸಬ್‌ಸೆಟ್ಟಿಂಗ್ ಸೇವೆಗಳಂತಹ ಪರಿಕರಗಳು ಇದಕ್ಕೆ ಸಹಾಯ ಮಾಡಬಹುದು.
• font-display ಬಳಸಿ: font-display ಪ್ರಾಪರ್ಟಿಯು ಫಾಂಟ್‌ಗಳು ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಪಠ್ಯದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು swap ಅಥವಾ optional ನಂತಹ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ.
• ಫಾಂಟ್‌ಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡಿ: ಪ್ರಮುಖ ಫಾಂಟ್‌ಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡಲು <link rel="preload"> ಟ್ಯಾಗ್ ಬಳಸಿ, ಪುಟ ಲೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಅವುಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ.
• ಫಾಂಟ್ ಸೇವೆಯನ್ನು ಪರಿಗಣಿಸಿ: Google Fonts, Adobe Fonts, ಮತ್ತು Fontdeck ನಂತಹ ಸೇವೆಗಳು ನಿಮಗಾಗಿ ಫಾಂಟ್ ಹೋಸ್ಟಿಂಗ್ ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ನಿಭಾಯಿಸಬಹುದು.

@font-feature-values ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವು ಸಾಮಾನ್ಯವಾಗಿ ನಗಣ್ಯವಾಗಿರುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಪ್ರಾಥಮಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾಳಜಿಯು ಫಾಂಟ್ ಫೈಲ್ ಗಾತ್ರವೇ ಆಗಿದೆ. ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದರ ಮೇಲೆ ಗಮನಹರಿಸಿ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳನ್ನು ನ್ಯಾಯಯುತವಾಗಿ ಬಳಸಿ.

ತೀರ್ಮಾನ: ಟೈಪೊಗ್ರಫಿಕ್ ಶ್ರೇಷ್ಠತೆಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು

@font-feature-values ನಿಯಮ ಮತ್ತು ಸಂಬಂಧಿತ CSS ಪ್ರಾಪರ್ಟಿಗಳು ಓಪನ್‌ಟೈಪ್ ಫಾಂಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಯುತ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ. ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳು, ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು, ಅಂತರರಾಷ್ಟ್ರೀಕರಣದ ಅವಶ್ಯಕತೆಗಳು, ಮತ್ತು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಮತ್ತು ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಬಲಪಡಿಸುವ ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಟೈಪೊಗ್ರಫಿಯನ್ನು ರಚಿಸಬಹುದು. @font-feature-values ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಟೈಪೊಗ್ರಫಿಕ್ ಶ್ರೇಷ್ಠತೆಯ ಹೊಸ ಎತ್ತರಕ್ಕೆ ಏರಿಸಿ.

ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳ ಟೈಪೊಗ್ರಫಿಕ್ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸುವ ಮೂಲಕ, ನೀವು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುವುದಲ್ಲದೆ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಒಳಗೊಳ್ಳುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಓಪನ್‌ಟೈಪ್ ಫೀಚರ್‌ಗಳ ಸಂಭಾವ್ಯ ಪರಿಣಾಮವನ್ನು ಓದುವಿಕೆ ಮತ್ತು ಉಪಯುಕ್ತತೆಯ ಮೇಲೆ ಗಮನದಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು, ಮತ್ತು ವೈವಿಧ್ಯಮಯ ಬಳಕೆದಾರರೊಂದಿಗೆ ನಿಮ್ಮ ಟೈಪೊಗ್ರಫಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ.