அச்சுக்கலை திறனை வெளிக்கொணர்தல்: CSS @font-feature-values க்கான ஒரு விரிவான வழிகாட்டி

வலை வடிவமைப்பு உலகில், பயனர் அனுபவத்தை வடிவமைப்பதிலும், பிராண்ட் அடையாளத்தை வெளிப்படுத்துவதிலும் அச்சுக்கலை ஒரு முக்கிய பங்கு வகிக்கிறது. font-family, font-size, மற்றும் font-weight போன்ற அடிப்படை CSS எழுத்துரு பண்புகள் அடிப்படைக் கட்டுப்பாட்டை வழங்கினாலும், @font-feature-values விதி மேம்பட்ட அச்சுக்கலை தனிப்பயனாக்கலுக்கான ஒரு உலகத்திற்கு நுழைவாயிலை வழங்குகிறது. இந்த விதி OpenType எழுத்துருக்களின் மறைக்கப்பட்ட திறனைத் திறந்து, மேம்பட்ட அழகியல், வாசிப்புத்திறன் மற்றும் அணுகல்தன்மைக்காக குறிப்பிட்ட எழுத்துரு அம்சங்களை நுட்பமாக சரிசெய்ய டெவலப்பர்கள் மற்றும் வடிவமைப்பாளர்களை அனுமதிக்கிறது. இந்த வழிகாட்டி @font-feature-values இன் நுணுக்கங்களை ஆராய்ந்து, அதன் தொடரியல், பயன்பாடு மற்றும் பல்வேறு உலகளாவிய சூழல்களில் நடைமுறைப் பயன்பாடுகளை ஆராய்கிறது.

OpenType அம்சங்களைப் புரிந்துகொள்ளுதல்

@font-feature-values இன் விவரங்களுக்குள் செல்வதற்கு முன், OpenType அம்சங்களின் அடிப்படைக் கருத்தைப் புரிந்துகொள்வது அவசியம். OpenType என்பது பரவலாக ஏற்றுக்கொள்ளப்பட்ட எழுத்துரு வடிவமாகும், இது அதன் முன்னோடிகளான TrueType மற்றும் PostScript இன் திறன்களை விரிவுபடுத்துகிறது. இது கிளிஃப் ரெண்டரிங்கின் பல்வேறு அம்சங்களைக் கட்டுப்படுத்தும் ஒரு வளமான அம்சங்களின் தொகுப்பை உள்ளடக்கியது, அவற்றுள்:

• இணைப்பெழுத்துக்கள் (Ligatures): மேம்பட்ட அழகியல் மற்றும் வாசிப்புத்திறனுக்காக இரண்டு அல்லது அதற்கு மேற்பட்ட எழுத்துக்களை ஒரே கிளிஃபில் இணைத்தல் (எ.கா., 'fi', 'fl').
• மாற்று கிளிஃப்கள் (Alternate Glyphs): குறிப்பிட்ட எழுத்துக்களின் வேறுபாடுகளை வழங்குதல், இது ஸ்டைலிஸ்டிக் தேர்வுகள் அல்லது சூழல்சார் சரிசெய்தல்களை அனுமதிக்கிறது.
• ஸ்டைலிஸ்டிக் செட்கள் (Stylistic Sets): தொடர்புடைய ஸ்டைலிஸ்டிக் வேறுபாடுகளை ஒரே பெயரின் கீழ் தொகுத்தல், இது வடிவமைப்பாளர்களுக்கு சீரான அழகியல் சிகிச்சைகளை எளிதாகப் பயன்படுத்த உதவுகிறது.
• எண் பாணிகள் (Number Styles): லைனிங் ஃபிகர்ஸ், ஓல்ட்ஸ்டைல் ஃபிகர்ஸ், மற்றும் டேபுலர் ஃபிகர்ஸ் போன்ற வெவ்வேறு எண் பாணிகளை வழங்குதல், ஒவ்வொன்றும் குறிப்பிட்ட பயன்பாட்டு நிகழ்வுகளுக்கு ஏற்றது.
• பின்னங்கள் (Fractions): பொருத்தமான தொகுதி, பகுதி மற்றும் பின்னக் கோடு கிளிஃப்களுடன் பின்னங்களை தானாக வடிவமைத்தல்.
• சிறிய பெரியெழுத்துக்கள் (Small Capitals): சிறிய எழுத்துக்களை பெரிய எழுத்துக்களின் சிறிய பதிப்புகளாகக் காண்பித்தல்.
• சூழல்சார் மாற்றுகள் (Contextual Alternates): சுற்றியுள்ள எழுத்துக்களின் அடிப்படையில் கிளிஃப் வடிவங்களை சரிசெய்தல், வாசிப்புத்திறன் மற்றும் காட்சி இணக்கத்தை மேம்படுத்துதல்.
• ஸ்வாஷ்கள் (Swashes): சில கிளிஃப்களில் சேர்க்கப்படும் அலங்கார நீட்டிப்புகள், இது நேர்த்தியையும் பகட்டையும் சேர்க்கிறது.
• கெர்னிங் (Kerning): காட்சி சமநிலையை மேம்படுத்த குறிப்பிட்ட எழுத்து ஜோடிகளுக்கு இடையிலான இடைவெளியை சரிசெய்தல்.

இந்த அம்சங்கள் பொதுவாக எழுத்துரு கோப்பிற்குள்ளேயே வரையறுக்கப்படுகின்றன. @font-feature-values ஆனது CSS இலிருந்து நேரடியாக இந்த அம்சங்களை அணுகவும் கட்டுப்படுத்தவும் ஒரு வழியை வழங்குகிறது, இது அச்சுக்கலை வடிவமைப்பில் இணையற்ற நெகிழ்வுத்தன்மையை வழங்குகிறது.

CSS @font-feature-values அறிமுகம்

@font-feature-values at-rule ஆனது குறிப்பிட்ட OpenType அம்ச அமைப்புகளுக்கு விளக்கமான பெயர்களை வரையறுக்க உங்களை அனுமதிக்கிறது. இது உங்கள் CSS இல் மனிதர்கள் எளிதில் படிக்கக்கூடிய பெயர்களைப் பயன்படுத்த உதவுகிறது, இதனால் உங்கள் குறியீடு பராமரிக்க எளிதாகவும் புரிந்துகொள்ள எளிதாகவும் இருக்கும். அடிப்படை தொடரியல் பின்வருமாறு:

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

            

              
                Copy
              
            
          

ஒவ்வொரு கூறுகளையும் பிரிப்போம்:

• @font-feature-values: அம்ச மதிப்புகளின் வரையறையைத் தொடங்கும் at-rule.
• <font-family-name>: இந்த அம்ச மதிப்புகள் பொருந்தும் எழுத்துரு குடும்பத்தின் பெயர் (எ.கா., 'MyCustomFont', 'Arial'). இது வரையறுக்கப்பட்ட அம்ச மதிப்புகள் குறிப்பிட்ட எழுத்துருவைப் பயன்படுத்தும் கூறுகளுக்கு மட்டுமே பயன்படுத்தப்படுவதை உறுதி செய்கிறது.
• <feature-tag-value>: ஒரு குறிப்பிட்ட OpenType அம்ச குறிச்சொல்லுக்கான மதிப்புகளை வரையறுக்கும் ஒரு தொகுதி.
• <feature-tag>: OpenType அம்சத்தை அடையாளம் காட்டும் ஒரு நான்கு-எழுத்து குறிச்சொல் (எ.கா., இணைப்பெழுத்துக்களுக்கு liga, சிறிய பெரியெழுத்துக்களுக்கு smcp, சூழல்சார் ஸ்வாஷ்களுக்கு cswh). இந்த குறிச்சொற்கள் தரப்படுத்தப்பட்டவை மற்றும் OpenType விவரக்குறிப்பால் வரையறுக்கப்பட்டவை. இந்த குறிச்சொற்களின் விரிவான பட்டியல்களை OpenType ஆவணங்கள் மற்றும் பல்வேறு ஆன்லைன் ஆதாரங்களில் காணலாம்.
• <feature-name>: OpenType அம்சத்திற்கான ஒரு குறிப்பிட்ட மதிப்பிற்கு நீங்கள் ஒதுக்கும் ஒரு விளக்கமான பெயர். இது உங்கள் CSS விதிகளில் நீங்கள் பயன்படுத்தும் பெயர். அர்த்தமுள்ள மற்றும் நினைவில் கொள்ள எளிதான பெயர்களைத் தேர்ந்தெடுக்கவும்.
• <feature-value>: OpenType அம்சத்திற்கான உண்மையான மதிப்பு. இது பொதுவாக பூலியன் அம்சங்களுக்கு on அல்லது off ஆகவோ, அல்லது மதிப்புகளின் வரம்பை ஏற்கும் அம்சங்களுக்கு ஒரு எண் மதிப்பாகவோ இருக்கும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

@font-feature-values இன் ஆற்றலை விளக்க, பல நடைமுறை எடுத்துக்காட்டுகளைக் கருத்தில் கொள்வோம்:

1. விருப்ப இணைப்பெழுத்துக்களை இயக்குதல்

விருப்ப இணைப்பெழுத்துக்கள் (Discretionary ligatures) என்பவை சில எழுத்து சேர்க்கைகளின் அழகியல் கவர்ச்சியை மேம்படுத்தக்கூடிய விருப்பமான இணைப்பெழுத்துக்கள் ஆகும். அவற்றை இயக்க, நீங்கள் இது போன்ற ஒரு அம்ச மதிப்பை வரையறுக்கலாம்:

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

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

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், dlig (discretionary ligatures) OpenType அம்சத்திற்காக 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. எண் பாணிகளைத் தனிப்பயனாக்குதல்

OpenType எழுத்துருக்கள் பெரும்பாலும் பல்வேறு நோக்கங்களுக்காக வெவ்வேறு எண் பாணிகளை வழங்குகின்றன. லைனிங் ஃபிகர்ஸ் பொதுவாக அட்டவணைகள் மற்றும் விளக்கப்படங்களில் பயன்படுத்தப்படுகின்றன, அதே சமயம் ஓல்ட்ஸ்டைல் ஃபிகர்ஸ் உடல் உரையுடன் தடையின்றி கலக்கின்றன.

            @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
              
            
          

இது பல OpenType அம்சங்களை ஒரே நேரத்தில் பயன்படுத்துவதன் மூலம் சிக்கலான அச்சுக்கலை விளைவுகளை அனுமதிக்கிறது. வரிசை சில நேரங்களில் முக்கியமானது என்பதை நினைவில் கொள்க. விரும்பிய முடிவை அடைய பரிசோதனை செய்வது முக்கியம்.

நேரடி அம்ச அணுகலுக்கு font-variant-settings ஐப் பயன்படுத்துதல்

@font-feature-values மற்றும் font-variant-alternates ஒரு உயர்-நிலை சுருக்கத்தை வழங்கினாலும், font-variant-settings பண்பு OpenType அம்சங்களுக்கு அவற்றின் நான்கு-எழுத்து குறிச்சொற்களைப் பயன்படுத்தி நேரடி அணுகலை வழங்குகிறது. முன்வரையறுக்கப்பட்ட 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 பொதுவாக 'on' ஐக் குறிக்கிறது, அதே சமயம் 0 'off' ஐக் குறிக்கிறது.

நீங்கள் ஒரே அறிவிப்பில் பல அம்ச அமைப்புகளை இணைக்கலாம்:

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

            

              
                Copy
              
            
          

இது நிலையான இணைப்பெழுத்துக்களை (liga) முடக்குகிறது, சூழல்சார் ஸ்வாஷ்களை (cswh) இயக்குகிறது, மற்றும் சூழல்சார் மாற்றுகளை (calt) இயக்குகிறது.

font-variant-settings இன் நன்மைகள்:

• நேரடிக் கட்டுப்பாடு: தனிப்பட்ட OpenType அம்சங்கள் மீது துல்லியமான கட்டுப்பாட்டை வழங்குகிறது.
• நெகிழ்வுத்தன்மை: font-variant-alternates ஆல் உள்ளடக்கப்படாத அம்சங்களை அணுக அனுமதிக்கிறது.

font-variant-settings இன் தீமைகள்:

• குறைந்த வாசிப்புத்திறன்: மூல அம்ச குறிச்சொற்களைப் பயன்படுத்துவது குறியீட்டை படிக்கக் கடினமாகவும் புரிந்துகொள்ளக் கடினமாகவும் மாற்றும்.
• குறைந்த பராமரிப்புத்திறன்: எழுத்துருவிற்குள் அம்ச குறிச்சொற்களில் மாற்றங்கள் செய்தால் CSS ஐ நேரடியாகப் புதுப்பிக்க வேண்டும்.

சிறந்த நடைமுறைகள்: சிறந்த வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனுக்காக முடிந்தவரை @font-feature-values மற்றும் font-variant-alternates ஐப் பயன்படுத்தவும். நேரடி அம்ச அணுகல் அவசியமான நிகழ்வுகளுக்கு font-variant-settings ஐ ஒதுக்கவும்.

அணுகல்தன்மை பரிசீலனைகள்

@font-feature-values அச்சுக்கலையின் காட்சி முறையீட்டை கணிசமாக மேம்படுத்த முடியும் என்றாலும், அணுகல்தன்மை தாக்கங்களைக் கருத்தில் கொள்வது அவசியம். தவறாகப் பயன்படுத்தப்பட்ட அம்சங்கள் மாற்றுத்திறனாளி பயனர்களுக்கு வாசிப்புத்திறன் மற்றும் பயன்பாட்டினை எதிர்மறையாக பாதிக்கலாம். இங்கே சில முக்கிய பரிசீலனைகள்:

• இணைப்பெழுத்துக்கள்: இணைப்பெழுத்துக்கள் அழகியலை மேம்படுத்த முடியும் என்றாலும், அவை டிஸ்லெக்ஸியா உள்ள பயனர்கள் அல்லது திரை வாசிப்பான்களை நம்பியிருப்பவர்களுக்கு வாசிப்புத்திறனைத் தடுக்கலாம். விருப்ப இணைப்பெழுத்துக்களை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும், குறிப்பாக உடல் உரையில். தேவைப்பட்டால் இணைப்பெழுத்துக்களை முடக்க விருப்பங்களை வழங்கவும்.
• மாற்று கிளிஃப்கள்: அதிகப்படியான அலங்கார அல்லது வழக்கத்திற்கு மாறான கிளிஃப்களைப் பயன்படுத்துவது உரையை புரிந்துகொள்வதை கடினமாக்கும். மாற்று கிளிஃப்கள் போதுமான மாறுபாடு மற்றும் தெளிவுத்தன்மையைப் பராமரிப்பதை உறுதி செய்யவும்.
• சூழல்சார் மாற்றுகள்: சூழல்சார் மாற்றுகள் பொதுவாக வாசிப்புத்திறனை மேம்படுத்தினாலும், மோசமாக வடிவமைக்கப்பட்ட மாற்றுகள் காட்சி முரண்பாடுகளையும் குழப்பத்தையும் உருவாக்கலாம். வெவ்வேறு எழுத்து சேர்க்கைகளுடன் சூழல்சார் மாற்றுகளை முழுமையாக சோதிக்கவும்.
• மாறுபாடு: பயன்படுத்தப்படும் OpenType அம்சங்களைப் பொருட்படுத்தாமல், உரைக்கும் பின்னணிக்கும் இடையில் போதுமான மாறுபாட்டை உறுதி செய்யவும். மாறுபாடு விகிதங்களைச் சரிபார்க்கவும் WCAG அணுகல்தன்மை வழிகாட்டுதல்களைப் பூர்த்தி செய்யவும் கருவிகளைப் பயன்படுத்தவும்.
• சோதனை: உரை சரியாக விளக்கப்பட்டு மாற்றுத்திறனாளி பயனர்களுக்கு தெரிவிக்கப்படுவதை உறுதிசெய்ய, திரை வாசிப்பான்கள் போன்ற உதவி தொழில்நுட்பங்களுடன் உங்கள் அச்சுக்கலையைச் சோதிக்கவும்.

பன்னாட்டுமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல்

பல்வேறு மொழிகள் மற்றும் எழுத்து முறைகளை ஆதரிப்பதில் OpenType அம்சங்கள் ஒரு முக்கிய பங்கு வகிக்கின்றன. பல எழுத்துருக்கள் குறிப்பிட்ட மொழிகள் அல்லது பிராந்தியங்களுக்காக பிரத்யேகமாக வடிவமைக்கப்பட்ட அம்சங்களைக் கொண்டுள்ளன. எடுத்துக்காட்டாக:

• அரபு: அரபுக்கான OpenType எழுத்துருக்கள் பெரும்பாலும் சூழல்சார் வடிவமைப்புக்கான அம்சங்களைக் கொண்டுள்ளன, இது ஒரு வார்த்தைக்குள் அவற்றின் நிலையின் அடிப்படையில் கிளிஃப்களை சரிசெய்கிறது.
• இந்திய எழுத்துக்கள்: இந்திய எழுத்துக்களுக்கான (எ.கா., தேவநாகரி, பெங்காலி, தமிழ்) எழுத்துருக்கள், கூட்டெழுத்து மெய்யெழுத்துக்கள் மற்றும் உயிரெழுத்து குறிகளை சரியாகக் கையாள சிக்கலான வடிவமைப்பு விதிகளை உள்ளடக்கியுள்ளன.
• CJK (சீனம், ஜப்பானியம், கொரியன்): CJK மொழிகளுக்கான OpenType எழுத்துருக்கள் பெரும்பாலும் பிராந்திய விருப்பங்களின் அடிப்படையில் மாற்று கிளிஃப் வடிவங்கள் மற்றும் ஸ்டைலிஸ்டிக் வேறுபாடுகளுக்கான அம்சங்களைக் கொண்டுள்ளன.

பல மொழி வலைத்தளங்களுக்காக வடிவமைக்கும்போது, இலக்கு மொழிகளைப் போதுமான அளவு ஆதரிக்கும் எழுத்துருக்களைத் தேர்ந்தெடுப்பதும், சரியான ரெண்டரிங் மற்றும் பொருத்தமான ஸ்டைலிஸ்டிக் வேறுபாடுகளை உறுதிசெய்ய OpenType அம்சங்களைப் பயன்படுத்துவதும் அவசியம். உங்கள் அச்சுக்கலை கலாச்சார ரீதியாக உணர்திறன் வாய்ந்தது மற்றும் மொழியியல் ரீதியாக துல்லியமானது என்பதை உறுதிப்படுத்த, தாய்மொழி பேசுபவர்கள் மற்றும் அச்சுக்கலை நிபுணர்களுடன் கலந்தாலோசிக்கவும்.

வெவ்வேறு மொழிகளில் OpenType அம்சங்களின் முக்கியத்துவத்தை விளக்கும் சில எடுத்துக்காட்டுகள் இங்கே:

• அரபு: பல அரபு எழுத்துருக்கள் ஒரு வார்த்தைக்குள் அவற்றின் நிலையின் அடிப்படையில் எழுத்துக்களை சரியாக இணைக்க சூழல்சார் மாற்றுகளை (`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 உடன் பணிபுரியும்போது, OpenType அம்சங்களை இயக்குவதன் செயல்திறன் தாக்கம் பொதுவாக மிகக் குறைவு என்பதை நினைவில் கொள்ளுங்கள். முதன்மை செயல்திறன் கவலை எழுத்துரு கோப்பு அளவுதான். எழுத்துரு ஏற்றுதலை மேம்படுத்துவதில் கவனம் செலுத்துங்கள் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த OpenType அம்சங்களை விவேகத்துடன் பயன்படுத்தவும்.

முடிவுரை: அச்சுக்கலை சிறப்பைத் தழுவுதல்

@font-feature-values விதி மற்றும் தொடர்புடைய CSS பண்புகள் OpenType எழுத்துருக்களின் முழு திறனையும் திறக்க ஒரு சக்திவாய்ந்த கருவித்தொகுப்பை வழங்குகின்றன. OpenType அம்சங்கள், அணுகல்தன்மை பரிசீலனைகள், பன்னாட்டுமயமாக்கல் தேவைகள் மற்றும் உலாவி இணக்கத்தன்மை ஆகியவற்றைப் புரிந்துகொள்வதன் மூலம், பயனர் அனுபவத்தை மேம்படுத்தும் மற்றும் உங்கள் பிராண்ட் அடையாளத்தை வலுப்படுத்தும் அதிநவீன மற்றும் பார்வைக்கு ஈர்க்கும் அச்சுக்கலையை நீங்கள் உருவாக்கலாம். @font-feature-values இன் ஆற்றலைத் தழுவி, உங்கள் வலை வடிவமைப்பை அச்சுக்கலை சிறப்பின் புதிய உயரங்களுக்கு உயர்த்தவும்.

வெவ்வேறு மொழிகள் மற்றும் கலாச்சாரங்களின் அச்சுக்கலை நுணுக்கங்களை கவனமாகக் கருத்தில் கொள்வதன் மூலம், பார்வைக்கு ஈர்ப்பது மட்டுமல்லாமல், உலகளாவிய பார்வையாளர்களுக்கு அணுகக்கூடிய மற்றும் உள்ளடக்கிய வலைத்தளங்களையும் நீங்கள் உருவாக்கலாம். வாசிப்புத்திறன் மற்றும் பயன்பாட்டினில் OpenType அம்சங்களின் சாத்தியமான தாக்கத்தைப் பற்றி கவனமாக இருப்பதும், உங்கள் அச்சுக்கலையை பலதரப்பட்ட பயனர்களுடன் முழுமையாகச் சோதிப்பதும் முக்கியம்.