CSS @font-face: உலகளாவிய வலை அனுபவங்களுக்கான தனிப்பயன் எழுத்துரு ஏற்றத்தில் தேர்ச்சி பெறுதல்

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

@font-face இன் ஆற்றலைப் புரிந்துகொள்ளுதல்

@font-face இன் வருகைக்கு முன்பு, இணைய வடிவமைப்பாளர்கள் பெரும்பாலும் ஒரு குறிப்பிட்ட சில கணினி எழுத்துருக்களுக்குள் கட்டுப்படுத்தப்பட்டிருந்தனர், இது இணைய அழகியலின் ஒரே மாதிரியான தன்மைக்கு வழிவகுத்தது. டெவலப்பர்களுக்கு தனிப்பயன் எழுத்துருக்களைக் குறிப்பிட அனுமதிப்பதன் மூலம் @font-face இதில் ஒரு புரட்சியை ஏற்படுத்தியது, பயனரின் உலாவி அவற்றை பதிவிறக்கம் செய்து காண்பிக்கும். இது வலைத்தளங்களுக்கு ஒரு தனித்துவமான அச்சுக்கலைக் குரலை அளிக்கிறது, இது பிராண்டை வேறுபடுத்துவதற்கும் குறிப்பிட்ட மனநிலைகள் அல்லது செய்திகளை வெளிப்படுத்துவதற்கும் இன்றியமையாதது.

@font-face இன் அடிப்படை தொடரியல் மிகவும் எளிமையானது:

            @font-face {
  font-family: 'YourFontName';
  src: url('path/to/your-font.woff2') format('woff2'),
       url('path/to/your-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

இந்த அத்தியாவசிய பண்புகளைப் பிரித்துப் பார்ப்போம்:

• font-family: உங்கள் CSS ஸ்டைல்ஷீட்டில் உங்கள் தனிப்பயன் எழுத்துருவைக் குறிப்பிட நீங்கள் பயன்படுத்தும் பெயர் இது. நீங்கள் விரும்பும் எந்தப் பெயரையும் தேர்ந்தெடுக்கலாம், ஆனால் அதை விளக்கமாக வைப்பது ஒரு நல்ல நடைமுறை.
• src: இந்த பண்பு @font-face இன் இதயம். இது எழுத்துரு கோப்புகளின் இருப்பிடத்தைக் குறிப்பிடுகிறது. நீங்கள் பல URLகளை வழங்கலாம், ஒவ்வொன்றும் வெவ்வேறு எழுத்துரு வடிவத்தைக் குறிக்கும். உலாவி ஆதரிக்கும் முதல் ஒன்றை பதிவிறக்கம் செய்ய முயற்சிக்கும்.
• url(): எழுத்துரு கோப்பிற்கான பாதையைக் குறிப்பிடுகிறது. இது ஒரு சார்பு அல்லது முழுமையான URL ஆக இருக்கலாம்.
• format(): இந்த முக்கிய விவரிப்பு, எழுத்துரு வடிவத்தை அடையாளம் காண உலாவிக்கு உதவுகிறது, ஆதரவற்ற வடிவங்களைப் பதிவிறக்குவதைத் தவிர்க்க அனுமதிக்கிறது. பொதுவான வடிவங்களில் woff2, woff, truetype (.ttf), opentype (.otf), மற்றும் embedded-opentype (.eot பழைய இன்டர்நெட் எக்ஸ்ப்ளோரர் பதிப்புகளுக்கு) ஆகியவை அடங்கும்.
• font-weight: எழுத்துருவின் தடிமனை (எ.கா., normal, bold, 100-900) வரையறுக்கிறது. ஒரே எழுத்துரு குடும்பத்தின் வெவ்வேறு தடிமன்களுக்கு நீங்கள் பொதுவாக தனித்தனி @font-face விதிகளை வரையறுப்பீர்கள்.
• font-style: எழுத்துருவின் பாணியை (எ.கா., normal, italic, oblique) குறிப்பிடுகிறது. தடிமனைப் போலவே, வெவ்வேறு பாணிகளுக்கு பொதுவாக தனித்தனி @font-face அறிவிப்புகள் தேவைப்படும்.

உலகளாவிய அணுகலுக்கு எழுத்துரு ஏற்றத்தை மேம்படுத்துதல்

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

எழுத்துரு வடிவங்கள் மற்றும் உலாவி ஆதரவைப் புரிந்துகொள்ளுதல்

நவீன உலாவிகள் .woff2 மற்றும் .woff வடிவங்களுக்கு சிறந்த ஆதரவை வழங்குகின்றன. இந்த வடிவங்கள் மிகவும் சுருக்கப்பட்டவை மற்றும் திறமையானவை, அவை வலை அச்சுக்கலைக்கு விருப்பமான தேர்வுகளாக அமைகின்றன.

• WOFF2 (Web Open Font Format 2): இது மிகவும் நவீன மற்றும் திறமையான வடிவமாகும், இது Brotli சுருக்கத்தைப் பயன்படுத்துவதால் சிறந்த சுருக்கத்தை (WOFF ஐ விட 45% வரை சிறந்தது) வழங்குகிறது. இது Chrome, Firefox, Safari மற்றும் Edge உட்பட அனைத்து நவீன உலாவிகளாலும் ஆதரிக்கப்படுகிறது.
• WOFF (Web Open Font Format): WOFF2 இன் முன்னோடியான WOFF, நல்ல சுருக்கத்தை வழங்குகிறது மற்றும் உலாவிகள் முழுவதும் பரவலாக ஆதரிக்கப்படுகிறது. WOFF2 கிடைக்கவில்லை என்றால் இது ஒரு நம்பகமான ஃபால்பேக் ஆகும்.
• TrueType Font (TTF) / OpenType Font (OTF): இவை இணையத்தில் பயன்படுத்தக்கூடிய பாரம்பரிய டெஸ்க்டாப் எழுத்துரு வடிவங்கள். இருப்பினும், அவை பொதுவாக WOFF/WOFF2 ஐ விட இணைய விநியோகத்திற்கு குறைவாகவே மேம்படுத்தப்பட்டுள்ளன, பெரிய கோப்பு அளவுகளுடன்.
• Embedded OpenType (EOT): இந்த வடிவம் முதன்மையாக IE9 க்கு முந்தைய இன்டர்நெட் எக்ஸ்ப்ளோரர் பதிப்புகளுக்குப் பயன்படுத்தப்பட்டது. இது இப்போது பெரும்பாலும் வழக்கொழிந்துவிட்டது, ஆனால் விதிவிலக்கான பின்தங்கிய இணக்கத்தன்மைக்காக சேர்க்கப்படலாம், இருப்பினும் இது நவீன மேம்பாட்டில் பெரும்பாலும் தவிர்க்கப்படுகிறது.
• SVG Fonts: Safari இன் பழைய பதிப்புகள் SVG எழுத்துருக்களை ஆதரித்தன. EOT ஐப் போலவே, இவையும் இன்று அரிதாகவே பயன்படுத்தப்படுகின்றன.

ஒரு வலுவான @font-face அறிவிப்பு பெரும்பாலும் வடிவங்களின் அடுக்கை உள்ளடக்கியது, மிகவும் திறமையானவற்றுக்கு முன்னுரிமை அளிக்கிறது:

            @font-face {
  font-family: 'MyAwesomeFont';
  src: url('/fonts/MyAwesomeFont.woff2') format('woff2'),
       url('/fonts/MyAwesomeFont.woff') format('woff');
}
            

              
                Copy
              
            
          

இந்த அமைப்பு உலாவிகள் முதலில் MyAwesomeFont.woff2 ஐ பதிவிறக்கம் செய்ய முயற்சிப்பதை உறுதி செய்கிறது. அவை WOFF2 ஐ ஆதரிக்கவில்லை என்றால், அவை MyAwesomeFont.woff ஐ பதிவிறக்குவதற்குத் திரும்பும்.

செயல்திறனுக்காக சப்செட்டிங்கைப் பயன்படுத்துதல்

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

எழுத்துரு சப்செட்டிங் என்பது உங்கள் குறிப்பிட்ட பயன்பாட்டு வழக்கத்திற்குத் தேவையான எழுத்துக்கள் (கிளிஃப்கள்) மற்றும் அம்சங்களை மட்டும் கொண்ட ஒரு சிறிய எழுத்துரு கோப்பை உருவாக்கும் செயல்முறையாகும். பல எழுத்துரு நிறுவனங்கள் மற்றும் ஆன்லைன் கருவிகள் எழுத்துரு சப்செட்டிங் திறன்களை வழங்குகின்றன. உதாரணமாக, ஒரு பிரெஞ்சு வலைத்தளத்திற்கு அடிப்படை லத்தீன் எழுத்துக்கள் மற்றும் சில குறிப்பிட்ட சின்னங்கள் மட்டுமே தேவைப்பட்டால், நீங்கள் அந்த கிளிஃப்களை மட்டும் கொண்ட ஒரு சப்செட் செய்யப்பட்ட WOFF2 கோப்பை உருவாக்கலாம்.

ஒரு செய்தி வலைத்தளம் தலைப்புகளை தடிமனான, ஸ்டைலான எழுத்துருவிலும், ஆனால் உடல் உரையை மிகவும் படிக்கக்கூடிய, நிலையான எழுத்துருவிலும் காட்ட வேண்டும் என்று ஒரு சூழ்நிலையைக் கவனியுங்கள். ஸ்டைலான எழுத்துருவை தலைப்புகளுக்குத் தேவையான அத்தியாவசிய எழுத்துக்களை மட்டும் சேர்க்க சப்செட் செய்வதன் மூலம், பதிவிறக்க அளவு வெகுவாகக் குறைக்கப்படுகிறது. உங்கள் @font-face விதியை வரையறுக்கும்போது, நீங்கள் சப்செட் செய்யப்பட்ட எழுத்துரு கோப்பை சுட்டிக்காட்ட வேண்டும்:

            @font-face {
  font-family: 'HeadlineFont';
  src: url('/fonts/HeadlineFont-subset.woff2') format('woff2');
  font-weight: 700;
}
            

              
                Copy
              
            
          

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

எழுத்துரு காட்சி உத்திகள்: பயனர் அனுபவத்தைக் கட்டுப்படுத்துதல்

தனிப்பயன் எழுத்துருக்கள் ஏற்றப்படும்போது, உங்கள் பக்கத்தில் உள்ள உரை இன்னும் ஸ்டைல் செய்யப்படாத ஒரு காலம் உள்ளது. இது ஒரு மினுமினுப்பு விளைவு (Flash of Invisible Text - FOIT) அல்லது ஒரு குழப்பமான தோற்றம் (Flash of Unstyled Text - FOUT) ஏற்பட வழிவகுக்கும். font-display CSS பண்பு இந்த நடத்தை மீது முக்கியமான கட்டுப்பாட்டை வழங்குகிறது, இது பயனர் அனுபவத்தை கணிசமாக பாதிக்கிறது.

font-display பண்பு பல மதிப்புகளை ஏற்றுக்கொள்கிறது:

• auto: உலாவியின் இயல்புநிலை நடத்தை. இது மாறுபடலாம், ஆனால் இது பொதுவாக ஒரு கணினி எழுத்துருவுக்குத் திரும்பி, பின்னர் ஏற்றப்பட்டவுடன் தனிப்பயன் எழுத்துருவுக்கு மாறும்.
• block: உலாவி ஒரு குறுகிய தடுப்புக் காலத்தை (பொதுவாக 3 வினாடிகள்) உருவாக்குகிறது, அந்த நேரத்தில் எழுத்துரு கண்ணுக்குத் தெரியாதது. அதற்குள் எழுத்துரு ஏற்றப்படாவிட்டால், உலாவி ஃபால்பேக் உரையைக் காட்டுகிறது. எழுத்துரு ஏற்றப்பட்டவுடன், அது மாற்றப்படுகிறது. இது FOIT க்கு வழிவகுக்கும்.
• swap: உலாவி உடனடியாக ஃபால்பேக் உரையைக் காட்டுகிறது (ஒரு கணினி எழுத்துருவைப் பயன்படுத்தி) பின்னர் அது ஏற்றப்பட்டவுடன் தனிப்பயன் எழுத்துருவுக்கு மாறுகிறது. இது பயனர் அனுபவத்திற்கு பெரும்பாலும் விரும்பப்படுகிறது, ஏனெனில் இது உரை உடனடியாகத் தெரிவதை உறுதி செய்கிறது.
• fallback: ஒரு கலப்பின அணுகுமுறை. உலாவி உடனடியாக ஃபால்பேக் உரையைக் காட்டுகிறது மற்றும் தனிப்பயன் எழுத்துருவுக்கு மிகக் குறுகிய கண்ணுக்குத் தெரியாத காலத்தை (எ.கா., 100ms) உருவாக்குகிறது. இந்த சுருக்கமான காலத்திற்குள் தனிப்பயன் எழுத்துரு ஏற்றப்பட்டால், அது காட்டப்படும்; இல்லையெனில், அது அமர்வின் மீதமுள்ள காலத்திற்கு ஃபால்பேக் எழுத்துருவுடன் ஒட்டிக்கொள்கிறது.
• optional: fallback ஐப் போன்றது, ஆனால் உலாவி எழுத்துருவுக்கு ஒரு நெட்வொர்க் கோரிக்கையை விடுத்து, அது மிக விரைவாக ஏற்றப்பட்டால் மட்டுமே (ஆரம்ப குறுகிய கண்ணுக்குத் தெரியாத காலத்தில்) அதைப் பயன்படுத்துகிறது. இந்த சாளரத்தை அது தவறவிட்டால், உலாவி முழுப் பக்க அமர்வுக்கும் ஃபால்பேக் எழுத்துருவுடன் ஒட்டிக்கொள்ளும், திறம்பட தனிப்பயன் எழுத்துருவை சாத்தியமான பிற்கால பயன்பாட்டிற்கு ஒத்திவைக்கிறது. செயல்திறன் மிக முக்கியமானதாக இருக்கும் முக்கியமானதல்லாத எழுத்துருக்களுக்கு இது சிறந்தது.

இணைப்பு வேகம் வியத்தகு முறையில் மாறுபடும் உலகளாவிய பார்வையாளர்களுக்கு, swap அல்லது fallback ஆகியவை பெரும்பாலும் மிகவும் பயனர் நட்பு விருப்பங்கள். அவை பயனர்கள் உடனடியாக உள்ளடக்கத்தைப் பார்ப்பதை உறுதிசெய்து, விரக்தியைத் தடுக்கின்றன.

font-display ஐ செயல்படுத்த, அதை உங்கள் @font-face விதிக்குச் சேர்க்கவும்:

            @font-face {
  font-family: 'GlobalSans';
  src: url('/fonts/GlobalSans.woff2') format('woff2');
  font-display: swap;
}
            

              
                Copy
              
            
          

எடுத்துக்காட்டு: ஒரு வங்கி பயன்பாட்டின் வலைத்தளத்தை கற்பனை செய்து பாருங்கள். நம்பகத்தன்மையற்ற இணையம் உள்ள பிராந்தியங்களில் உள்ள பயனர்களுக்கு, ஒரு பெரிய எழுத்துரு கோப்பால் ஏற்படும் ஒரு FOIT, அவர்கள் உள்நுழைவு பொத்தானைக் கூட பல வினாடிகளுக்குப் பார்க்க முடியாது என்று அர்த்தம். font-display: swap; ஐப் பயன்படுத்துவது உள்நுழைவு படிவம் உடனடியாக ஒரு கணினி எழுத்துருவுடன் தெரிவதை உறுதி செய்கிறது, மேலும் தனிப்பயன் பிராண்டிங் எழுத்துரு பின்னர் ஏற்றப்பட்டு, பயன்பாட்டினைப் பராமரிக்கிறது.

மேம்பட்ட செயல்திறனுக்காக எழுத்துருக்களை முன்கூட்டியே ஏற்றுதல்

ஏற்ற செயல்முறையை மேலும் மேம்படுத்த, உங்கள் HTML ஆவணத்தின் <head> இல் <link rel="preload"> குறிச்சொற்களைப் பயன்படுத்தலாம். இது பக்க ஏற்றுதல் செயல்முறையின் ஆரம்பத்திலேயே எழுத்துரு கோப்புகளைப் பெற உலாவிக்குச் சொல்கிறது, அவற்றைப் பயன்படுத்தும் CSS ஐ சந்திப்பதற்கு முன்பே.

ஆரம்ப வியூபோர்ட் அல்லது முக்கியமான உள்ளடக்கத்திற்கு அத்தியாவசியமான எழுத்துருக்களை மட்டுமே முன்கூட்டியே ஏற்றுவது முக்கியம். அதிகப்படியான முன்கூட்டியே ஏற்றுதல் பிற வளங்களுக்குத் தேவையான அலைவரிசையை உட்கொள்வதன் மூலம் செயல்திறனை எதிர்மறையாக பாதிக்கலாம்.

உங்கள் HTML இன் <head> பிரிவில் இந்த வரிகளைச் சேர்க்கவும்:

            <link rel="preload" href="/fonts/MyAwesomeFont.woff2" as="font" type="font/woff2" crossorigin></link>
<link rel="preload" href="/fonts/MyAwesomeFont.woff" as="font" type="font/woff" crossorigin></link>
            

              
                Copy
              
            
          

முக்கிய பண்புக்கூறுகள்:

• href: உங்கள் எழுத்துரு கோப்பிற்கான பாதை.
• as="font": இது ஒரு எழுத்துரு வளம் என்பதை உலாவிக்குச் சொல்கிறது.
• type="font/woff2": MIME வகையைக் குறிப்பிடுகிறது, உலாவி முன்னுரிமை அளிக்க உதவுகிறது.
• crossorigin: உங்கள் எழுத்துருக்கள் வேறு டொமைன் அல்லது CDN இல் ஹோஸ்ட் செய்யப்பட்டால் CORS (Cross-Origin Resource Sharing) க்கு அவசியம். எழுத்துரு ஒரே மூலத்தில் இருந்தால் அதை anonymous என அமைக்க வேண்டும் அல்லது தவிர்க்கலாம்.

சிறந்த நடைமுறை: வேகம் மற்றும் காட்சி அனுபவத்தின் சிறந்த சமநிலைக்கு @font-face ஐ font-display: swap; மற்றும் மூலோபாய முன்கூட்டியே ஏற்றுதலுடன் இணைக்கவும். உங்கள் மிக முக்கியமான எழுத்துரு மாறுபாட்டை (எ.கா., உங்கள் முதன்மை எழுத்துருவின் வழக்கமான தடிமன்) <link rel="preload"> ஐப் பயன்படுத்தி முன்கூட்டியே ஏற்றவும், மற்ற மாறுபாடுகளுக்கு அல்லது ஒரு ஃபால்பேக்காக font-display: swap; ஐப் பயன்படுத்தவும்.

மேம்பட்ட @font-face நுட்பங்கள் மற்றும் பரிசீலனைகள்

அடிப்படைகளுக்கு அப்பால், பல மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள் உங்கள் தனிப்பயன் எழுத்துரு செயலாக்கத்தை மேலும் செம்மைப்படுத்தலாம்.

எழுத்துரு மாறுபாடு மற்றும் வேரியபிள் எழுத்துருக்கள்

வேரியபிள் எழுத்துருக்கள் அச்சுக்கலையில் ஒரு புரட்சிகரமான முன்னேற்றம். ஒவ்வொரு தடிமன் மற்றும் பாணிக்கும் (எ.கா., Regular, Bold, Italic) பல கோப்புகளை அனுப்புவதற்குப் பதிலாக, ஒரு ஒற்றை வேரியபிள் எழுத்துரு கோப்பு வடிவமைப்பு மாறுபாடுகளின் ஒரு பரந்த வரம்பை உள்ளடக்க முடியும். இது கோப்பு அளவை கணிசமாகக் குறைக்கிறது மற்றும் அச்சுக்கலை பண்புகள் மீது நெகிழ்வான கட்டுப்பாட்டை வழங்குகிறது.

வேரியபிள் எழுத்துருக்கள் மூலம், நீங்கள் எழுத்துரு தடிமன்களை அனிமேட் செய்யலாம், ஆப்டிகல் அளவை பறக்கும்போது சரிசெய்யலாம், அல்லது எழுத்து இடைவெளியை மாறும் வகையில் சரிசெய்யலாம். ஒரு வேரியபிள் எழுத்துருவுக்கான @font-face அறிவிப்பு ஒத்ததாகத் தெரிகிறது, ஆனால் நீங்கள் பெரும்பாலும் font-weight மற்றும் font-style க்கு ஒரு வரம்பைக் குறிப்பிடுவீர்கள், அல்லது எழுத்துரு ஆதரிக்கும் குறிப்பிட்ட அச்சுகளைப் பயன்படுத்துவீர்கள்.

ஒரு வேரியபிள் எழுத்துருவைப் பயன்படுத்தி எடுத்துக்காட்டு (எழுத்துரு தடிமன் மற்றும் இட்டாலிக் அச்சுகளை ஆதரிக்கிறது என்று ধরেக்கொண்டு):

            @font-face {
  font-family: 'VariableFont';
  src: url('/fonts/VariableFont.woff2') format('woff2');
  font-weight: 100 900; /* Defines the range of weights */
  font-style: italic 0 italic 1; /* Defines italic range if applicable */
}

/* Applying different weights */
h1 {
  font-family: 'VariableFont';
  font-weight: 700;
}

p {
  font-family: 'VariableFont';
  font-weight: 450;
}

.italic-text {
  font-family: 'VariableFont';
  font-style: italic;
  font-weight: 500;
}
            

              
                Copy
              
            
          

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

எழுத்துரு ஃபால்பேக்குகளை நேர்த்தியாகக் கையாளுதல்

சிறந்த முயற்சிகள் இருந்தபோதிலும், எழுத்துரு ஏற்றம் தோல்வியடையக்கூடும். பாதகமான சூழ்நிலைகளில் கூட, வாசிப்புத்திறன் மற்றும் ஒரு சீரான தோற்றத்தைப் பராமரிக்க ஒரு வலுவான ஃபால்பேக் உத்தியைச் செயல்படுத்துவது முக்கியம்.

உங்கள் CSS எழுத்துருக்களின் தெளிவான படிநிலையை வரையறுக்க வேண்டும். உங்கள் தனிப்பயன் எழுத்துருவுடன் தொடங்கி, அதன் பண்புகளுடன் நெருக்கமாகப் பொருந்தக்கூடிய ஒரு பொதுவான எழுத்துரு குடும்பத்துடன் தொடரவும்.

            body {
  font-family: 'MyCustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  font-family: 'MyHeadlineFont', Georgia, Times, 'Times New Roman', serif;
}

            

              
                Copy
              
            
          

உலகளாவிய ஃபால்பேக்குகளுக்கான பரிசீலனைகள்:

• மொழி சார்ந்த ஃபால்பேக்குகள்: உண்மையிலேயே உலகளாவிய பார்வையாளர்களைக் கொண்ட வலைத்தளங்களுக்கு, வெவ்வேறு பிராந்தியங்கள் விரும்பத்தக்க கணினி எழுத்துருக்களைக் கொண்டிருக்கலாம் என்பதைக் கவனியுங்கள். Arial மற்றும் Times New Roman போன்ற பொதுவான ஃபால்பேக்குகள் பரவலாகக் கிடைத்தாலும், சில சூழல்களில், குறிப்பிட்ட பிராந்தியங்களில் பொதுவான அதிக மாறுபட்ட இயக்க முறைமைகள் அல்லது மொபைல் சாதனங்களில் இருப்பதாக அறியப்பட்ட ஃபால்பேக்குகளை நீங்கள் சேர்க்க விரும்பலாம். இருப்பினும், எளிமை மற்றும் பரந்த இணக்கத்தன்மைக்காக, உலகளவில் அங்கீகரிக்கப்பட்ட பொதுவான குடும்பங்களுடன் ஒட்டிக்கொள்வது பெரும்பாலும் மிகவும் நடைமுறை அணுகுமுறையாகும்.
• எழுத்துத் தொகுப்புகள்: உங்கள் ஃபால்பேக் எழுத்துருக்கள் உங்கள் உள்ளடக்கத்திற்குத் தேவையான எழுத்துத் தொகுப்புகளை ஆதரிக்கின்றன என்பதை உறுதிப்படுத்தவும். உங்கள் முதன்மை எழுத்துரு ஒரு பன்மொழி தளத்திற்கானதாக இருந்தால், உங்கள் ஃபால்பேக்கும் பரந்த எழுத்து ஆதரவை வழங்குவது சிறந்தது.

உள்ளூர் எழுத்துருக்களைப் பயன்படுத்துதல் (கவனத்துடன்)

@font-face உங்கள் `src` பண்பில் ஒரு உள்ளூர் எழுத்துரு பெயரைக் குறிப்பிட உங்களை அனுமதிக்கிறது. எழுத்துரு ஏற்கனவே பயனரின் கணினியில் நிறுவப்பட்டிருந்தால், உலாவி வலை எழுத்துருவைப் பதிவிறக்குவதற்குப் பதிலாக அதைப் பயன்படுத்தலாம், அலைவரிசையைச் சேமிக்கலாம்.

            @font-face {
  font-family: 'MySystemFont';
  src: local('MySystemFontRegular'), /* Name as installed */
       local('MySystemFont-Regular'),
       url('/fonts/MySystemFont.woff2') format('woff2');
}

            

              
                Copy
              
            
          

எச்சரிக்கைகள்:

• சீர்குலைந்த பெயரிடல்: உள்ளூர் எழுத்துரு பெயர்கள் இயக்க முறைமைகள் மற்றும் வெவ்வேறு நிறுவல்களிலும் கணிசமாக வேறுபடலாம். இது நம்பகமான கண்டறிதலை கடினமாக்குகிறது.
• எழுத்துரு வேறுபாடுகள்: ஒரே பெயரில் ஒரு எழுத்துரு உள்நாட்டில் நிறுவப்பட்டிருந்தாலும், அது வேறு பதிப்பாக இருக்கலாம் அல்லது வலை எழுத்துருவை விட சற்றே ভিন্ন அளவீடுகளைக் கொண்டிருக்கலாம், இது தளவமைப்பு மாற்றங்களுக்கு வழிவகுக்கும்.
• வரையறுக்கப்பட்ட நன்மை: நவீன வலை எழுத்துரு மேம்படுத்தலுடன் (WOFF2, சப்செட்டிங், முன்கூட்டியே ஏற்றுதல்), உள்ளூர் எழுத்துருக்களை நம்பியிருப்பதன் நன்மை பெரும்பாலும் மிகக் குறைவு மற்றும் அது தீர்ப்பதை விட அதிகமான சிக்கல்களை அறிமுகப்படுத்தலாம்.

பரிந்துரை: உங்கள் `src` பட்டியலில் ஆரம்ப படியாக உள்ளூர் எழுத்துரு அறிவிப்புகளை நீங்கள் சேர்க்கலாம் என்றாலும், உங்கள் உலகளாவிய பார்வையாளர்கள் முழுவதும் கணிக்கக்கூடிய முடிவுகளுக்கு வலை எழுத்துரு பதிப்புகளுக்கு முன்னுரிமை அளியுங்கள்.

எழுத்துரு ஏற்றம் API: மேலும் நுணுக்கமான கட்டுப்பாடு

இன்னும் நுண்ணிய கட்டுப்பாட்டிற்கு, CSS எழுத்துரு ஏற்றம் API ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகளை வழங்குகிறது. இது எழுத்துருக்களை மாறும் வகையில் ஏற்றவும், அவற்றின் ஏற்ற நிலையை சரிபார்க்கவும், நிகழ்நேர நிகழ்வுகளின் அடிப்படையில் அவற்றைப் பயன்படுத்தவும் உங்களை அனுமதிக்கிறது.

ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, நீங்கள்:

• தேவைக்கேற்ப எழுத்துருக்களை ஏற்றலாம்.
• எழுத்துரு ஏற்ற முன்னேற்றத்திற்கு பதிலளிக்கலாம்.
• எழுத்துருக்கள் ஏற்றப்பட்ட பிறகு மட்டுமே குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்தலாம்.

FontFace மற்றும் document.fonts ஐப் பயன்படுத்தி எடுத்துக்காட்டு:

            const fontFace = new FontFace('MyDynamicFont', 'url(/fonts/MyDynamicFont.woff2)', {
  style: 'normal',
  weight: 'normal'
});

document.fonts.add(fontFace);

fontFace.load().then(function() {
  // Font loaded successfully, now apply it or update UI
  document.body.style.fontFamily = 'MyDynamicFont, sans-serif';
}).catch(function(error) {
  // Handle font loading errors
  console.error('Font loading failed:', error);
});
            

              
                Copy
              
            
          

உலகளாவிய பயன்பாட்டு வழக்கு: இது தகவமைக்கக்கூடிய UIகளுக்கு சக்தி வாய்ந்தது. ஒரு பயண முன்பதிவு தளத்தை கற்பனை செய்து பாருங்கள். ஒரு பயனர் ஜப்பானில் உள்ள இடங்களை உலாவினால், உலகெங்கிலும் உள்ள அனைத்து பயனர்களுக்கும் ஒரு பெரிய எழுத்துரு கோப்பை அனுப்புவதற்குப் பதிலாக, தேவைப்படும்போது மட்டுமே உங்கள் எழுத்துருவிற்கு ஜப்பானிய எழுத்து ஆதரவை மாறும் வகையில் ஏற்றலாம்.

எழுத்துரு மேலாண்மை சேவைகள் மற்றும் CDNகள்

பலருக்கு, எழுத்துரு கோப்புகளை நிர்வகிப்பது மற்றும் உகந்த விநியோகத்தை உறுதி செய்வது சிக்கலானதாக இருக்கும். வலை எழுத்துரு சேவைகள் மற்றும் உள்ளடக்க விநியோக நெட்வொர்க்குகள் (CDNகள்) ஒரு வசதியான மற்றும் பெரும்பாலும் மிகவும் மேம்படுத்தப்பட்ட தீர்வை வழங்குகின்றன.

• கூகிள் எழுத்துருக்கள்: மிகவும் பிரபலமான இலவச சேவைகளில் ஒன்று, திறந்த மூல எழுத்துருக்களின் ஒரு பரந்த நூலகத்தை வழங்குகிறது. நீங்கள் பொதுவாக ஒரு எளிய இணைப்பு குறிச்சொல்லைப் பயன்படுத்தி அவற்றை உட்பொதிக்கிறீர்கள். கூகிள் எழுத்துருக்கள் தானாகவே மிகவும் திறமையான வடிவங்களை (WOFF2 போன்றவை) வழங்குகிறது மற்றும் இயல்பாகவே font-display: swap; ஐ உள்ளடக்கியுள்ளது.
• அடோப் எழுத்துருக்கள் (Typekit): உயர்தர வணிக எழுத்துருக்களை வழங்கும் ஒரு சந்தா அடிப்படையிலான சேவை. இது வலுவான ஒருங்கிணைப்பு மற்றும் செயல்திறன் மேம்படுத்தலை வழங்குகிறது.
• ஒரு CDN உடன் சுய-ஹோஸ்டிங்: நீங்கள் உங்கள் சொந்த எழுத்துரு கோப்புகளை ஒரு CDN இல் ஹோஸ்ட் செய்யலாம். இது கோப்பு வடிவங்கள், சப்செட்டிங் மற்றும் விநியோகம் மீது முழுமையான கட்டுப்பாட்டை உங்களுக்கு வழங்குகிறது. CDNகள் உலகளவில் விநியோகிக்கப்பட்டுள்ளன, பயனர்கள் அவர்களின் இருப்பிடத்தைப் பொருட்படுத்தாமல் விரைவான விநியோகத்தை உறுதி செய்கின்றன.

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

அணுகல்தன்மை மற்றும் உள்ளடக்கத்தை உறுதி செய்தல்

அச்சுக்கலை வலை அணுகல்தன்மையின் ஒரு முக்கிய அங்கமாகும். ஒரு உலகளாவிய பார்வையாளர்களுக்கு, இது உங்கள் தனிப்பயன் எழுத்துருக்கள் அனைவராலும் படிக்கக்கூடியதாகவும் பயன்படுத்தக்கூடியதாகவும் இருப்பதை உறுதி செய்வதாகும்.

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

உலகளாவிய அணுகல்தன்மை பரிசீலனை: உலக சுகாதார அமைப்பின் ஒரு ஆய்வுப்படி, உலகளவில் 285 மில்லியனுக்கும் அதிகமான மக்கள் பார்வை குறைபாடுடன் வாழ்கின்றனர். சிறந்த ஃபால்பேக் வழிமுறைகளுடன் தெளிவான, படிக்கக்கூடிய அச்சுக்கலைக்கு முன்னுரிமை அளிப்பது ஒரு வடிவமைப்புத் தேர்வு மட்டுமல்ல; இது உள்ளடக்கத்திற்கான ஒரு அர்ப்பணிப்பு.

முடிவுரை: உலகளாவிய அச்சுக்கலைச் சிறப்பை உருவாக்குதல்

@font-face விதி ஒரு சக்திவாய்ந்த கருவியாகும், இது சிந்தனையுடன் பயன்படுத்தப்படும்போது, ஒரு உலகளாவிய பார்வையாளர்களுக்காக உங்கள் வலைத்தளத்தின் வடிவமைப்பு மற்றும் பயனர் அனுபவத்தை உயர்த்த முடியும். எழுத்துரு வடிவங்களைப் புரிந்துகொள்வதன் மூலமும், font-display மற்றும் முன்கூட்டியே ஏற்றுதல் போன்ற ஏற்றுதல் உத்திகளில் தேர்ச்சி பெறுவதன் மூலமும், வேரியபிள் எழுத்துருக்கள் மற்றும் சப்செட்டிங் போன்ற மேம்பட்ட நுட்பங்களைக் கருத்தில் கொள்வதன் மூலமும், நீங்கள் உலகளவில் அழகான, செயல்திறன் மிக்க மற்றும் அணுகக்கூடிய அச்சுக்கலையை வழங்க முடியும்.

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