அச்சுக்கலை ஆற்றலைத் திறத்தல்: CSS எழுத்துரு அம்ச மதிப்புகள் மற்றும் ஓபன்டைப் பற்றிய ஒரு ஆழமான பார்வை

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

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

ஓபன்டைப் அம்சங்கள் என்றால் என்ன?

நாம் CSS-க்குள் மூழ்குவதற்கு முன், நாம் எதைக் கட்டுப்படுத்துகிறோம் என்பதைப் புரிந்துகொள்வது முக்கியம். ஓபன்டைப் என்பது ஒரு எழுத்துரு வடிவமாகும், இது எழுத்துக்கள், எண்கள் மற்றும் சின்னங்களின் அடிப்படை வடிவங்களுக்கு அப்பாற்பட்ட பெரும் அளவிலான தரவுகளைக் கொண்டிருக்கலாம். இந்தத் தரவுகளுக்குள், எழுத்துரு வடிவமைப்பாளர்கள் "அம்சங்கள்" எனப்படும் பரந்த அளவிலான விருப்ப திறன்களைப் పొదించலாம்.

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

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

CSS நுழைவாயில்: உயர்-நிலை பண்புகள் மற்றும் கீழ்-நிலை கட்டுப்பாடு

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

விரும்பத்தக்க முறை: உயர்-நிலை பண்புகள்

நவீன CSS, `font-variant` குடையின் கீழ் பல பண்புகளையும், அதனுடன் `font-kerning`-ஐயும் வழங்குகிறது. இவை சிறந்த நடைமுறையாகக் கருதப்படுகின்றன, ஏனெனில் அவற்றின் பெயர்கள் அவற்றின் நோக்கத்தை தெளிவாக விவரிக்கின்றன, இது உங்கள் குறியீட்டைப் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.

• font-kerning: எழுத்துருவில் சேமிக்கப்பட்ட கெர்னிங் தகவலின் பயன்பாட்டைக் கட்டுப்படுத்துகிறது.
• font-variant-ligatures: பொதுவான, விருப்பத்தேர்வு, வரலாற்று மற்றும் சூழல் சார்ந்த லிகேச்சர்களைக் கட்டுப்படுத்துகிறது.
• font-variant-numeric: எண்கள், பின்னங்கள் மற்றும் வெட்டப்பட்ட பூஜ்ஜியத்திற்கான வெவ்வேறு பாணிகளைக் கட்டுப்படுத்துகிறது.
• font-variant-caps: ஸ்மால் கேப்ஸ் போன்ற பெரிய எழுத்து மாறுபாடுகளைக் கட்டுப்படுத்துகிறது.
• font-variant-alternates: ஸ்டைலிஸ்டிக் மாற்று வடிவங்கள் மற்றும் எழுத்துரு மாறுபாடுகளுக்கான அணுகலை வழங்குகிறது.

இந்த பண்புகளின் முக்கிய நன்மை என்னவென்றால், நீங்கள் என்ன அடைய விரும்புகிறீர்கள் என்பதை பிரவுசரிடம் சொல்கிறீர்கள் (எ.கா., `font-variant-caps: small-caps;`), மேலும் அதைச் செய்வதற்கான சிறந்த வழியை பிரவுசர் கண்டறிகிறது. ஒரு குறிப்பிட்ட அம்சம் கிடைக்கவில்லை என்றால், பிரவுசர் அதை நேர்த்தியாகக் கையாளும்.

சக்திவாய்ந்த கருவி: `font-feature-settings`

உயர்-நிலை பண்புகள் சிறந்தவை என்றாலும், அவை கிடைக்கக்கூடிய ஒவ்வொரு ஓபன்டைப் அம்சத்தையும் உள்ளடக்காது. முழுமையான கட்டுப்பாட்டிற்கு, நம்மிடம் கீழ்-நிலை `font-feature-settings` பண்பு உள்ளது. இது பெரும்பாலும் கடைசி முயற்சியின் கருவியாக விவரிக்கப்படுகிறது, ஆனால் இது நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது.

இதன் தொடரியல் இப்படி இருக்கும்:

font-feature-settings: "" , "" ;

• அம்சக் குறிச்சொல் (Feature Tag): ஒரு குறிப்பிட்ட ஓபன்டைப் அம்சத்தை அடையாளம் காணும், கேஸ்-சென்சிடிவ், நான்கு-எழுத்து சரம் (எ.கா., `"liga"`, `"smcp"`, `"ss01"`).
• மதிப்பு (Value): பொதுவாக ஒரு முழு எண். பல அம்சங்களுக்கு, `1` என்பது "ஆன்" மற்றும் `0` என்பது "ஆஃப்" என்பதாகும். ஸ்டைலிஸ்டிக் செட்கள் போன்ற சில அம்சங்கள், ஒரு குறிப்பிட்ட மாறுபாட்டைத் தேர்ந்தெடுக்க மற்ற முழு எண் மதிப்புகளை ஏற்கலாம்.

பொன் விதி: எப்போதும் முதலில் உயர்-நிலை `font-variant-*` பண்புகளைப் பயன்படுத்த முயற்சிக்கவும். உங்களுக்குத் தேவைப்படும் ஒரு அம்சம் அவற்றின் மூலம் அணுகப்படவில்லை என்றாலோ, அல்லது உயர்-நிலை பண்புகள் அனுமதிக்காத வழியில் அம்சங்களை இணைக்க வேண்டியிருந்தாலோ, அப்போது `font-feature-settings`-ஐப் பயன்படுத்தவும்.

பொதுவான ஓபன்டைப் அம்சங்களின் ஒரு நடைமுறைப் பயணம்

CSS மூலம் நீங்கள் கட்டுப்படுத்தக்கூடிய மிகவும் பயனுள்ள மற்றும் சுவாரஸ்யமான ஓபன்டைப் அம்சங்களில் சிலவற்றை ஆராய்வோம். ஒவ்வொன்றிற்கும், அதன் நோக்கம், அதன் 4-எழுத்து குறிச்சொல் மற்றும் அதை இயக்குவதற்கான CSS ஆகியவற்றை நாம் காண்போம்.

வகை 1: லிகேச்சர்கள் - எழுத்துக்களை அழகாக இணைத்தல்

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

வழக்கமான லிகேச்சர்கள் (Standard Ligatures)

• குறிச்சொல்: `liga`
• நோக்கம்: `fi`, `fl`, `ff`, `ffi`, மற்றும் `ffl` போன்ற பொதுவான, சிக்கலான எழுத்து சேர்க்கைகளை சிறப்பாக வடிவமைக்கப்பட்ட ஒற்றை கிளிஃப் மூலம் மாற்றுவது. இது பல எழுத்துருக்களில் வாசிப்புத்திறனுக்கான ஒரு அடிப்படை அம்சமாகும்.
• உயர்-நிலை CSS: `font-variant-ligatures: common-ligatures;` (பெரும்பாலும் பிரவுசர்களில் இயல்பாகவே இயக்கப்படும்)
• கீழ்-நிலை CSS: `font-feature-settings: "liga" 1;`

விருப்பத்தேர்வு லிகேச்சர்கள் (Discretionary Ligatures)

• குறிச்சொல்: `dlig`
• நோக்கம்: இவை `ct`, `st`, அல்லது `sp` போன்ற சேர்க்கைகளுக்கான அதிக அலங்கார மற்றும் ஸ்டைலான லிகேச்சர்கள் ஆகும். இவை வாசிப்புத்திறனுக்கு அவசியமானவை அல்ல, மேலும் நேர்த்தியைச் சேர்க்க தலைப்புகள் அல்லது லோகோக்களில் தேர்ந்தெடுக்கப்பட்ட முறையில் பயன்படுத்தப்பட வேண்டும்.
• உயர்-நிலை CSS: `font-variant-ligatures: discretionary-ligatures;`
• கீழ்-நிலை CSS: `font-feature-settings: "dlig" 1;`

வகை 2: எண்கள் - சரியான வேலைக்கு சரியான எண்

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

பழைய பாணி மற்றும் வரிசை எண்கள் (Oldstyle vs. Lining Figures)

• குறிச்சொற்கள்: `onum` (பழைய பாணி), `lnum` (வரிசை)
• நோக்கம்: வரிசை எண்கள் நாம் எல்லா இடங்களிலும் காணும் நிலையான எண்கள்—அனைத்தும் ஒரே சீரான உயரத்தில், பெரிய எழுத்துக்களுடன் இணைகின்றன. எண்கள் செங்குத்தாக வரிசைப்படுத்தப்பட வேண்டிய அட்டவணைகள், விளக்கப்படங்கள் மற்றும் பயனர் இடைமுகங்களுக்கு அவை சரியானவை. பழைய பாணி எண்கள், இதற்கு மாறாக, சிறிய எழுத்துக்களைப் போலவே ஏறுவரிசை மற்றும் இறங்குவரிசைகளுடன் வெவ்வேறு உயரங்களைக் கொண்டுள்ளன. இது உரையின் ஒரு பத்தியில் கவனத்தை ஈர்க்காமல் தடையின்றி கலக்க அனுமதிக்கிறது.
• உயர்-நிலை CSS: `font-variant-numeric: oldstyle-nums;` அல்லது `font-variant-numeric: lining-nums;`
• கீழ்-நிலை CSS: `font-feature-settings: "onum" 1;` அல்லது `font-feature-settings: "lnum" 1;`

விகிதாசார மற்றும் அட்டவணை எண்கள் (Proportional vs. Tabular Figures)

• குறிச்சொற்கள்: `pnum` (விகிதாசாரம்), `tnum` (அட்டவணை)
• நோக்கம்: இது எண்களின் அகலத்தைக் கட்டுப்படுத்துகிறது. அட்டவணை எண்கள் மோனோஸ்பேஸ் கொண்டவை—ஒவ்வொரு எண்ணும் ஒரே மாதிரியான கிடைமட்ட இடத்தை எடுத்துக்கொள்கிறது. இது நிதி அறிக்கைகள், குறியீடு அல்லது வெவ்வேறு வரிசைகளில் உள்ள எண்கள் நெடுவரிசைகளில் சரியாகப் பொருந்த வேண்டிய எந்தவொரு தரவு அட்டவணைக்கும் முக்கியமானது. விகிதாசார எண்கள் மாறி அகலங்களைக் கொண்டுள்ளன; எடுத்துக்காட்டாக, '1' என்ற எண் '8' என்ற எண்ணை விட குறைவான இடத்தை எடுத்துக்கொள்கிறது. இது மேலும் சீரான இடைவெளியை உருவாக்குகிறது மற்றும் இயங்கும் உரையில் பயன்படுத்த ஏற்றது.
• உயர்-நிலை CSS: `font-variant-numeric: proportional-nums;` அல்லது `font-variant-numeric: tabular-nums;`
• கீழ்-நிலை CSS: `font-feature-settings: "pnum" 1;` அல்லது `font-feature-settings: "tnum" 1;`

பின்னங்கள் மற்றும் வெட்டப்பட்ட பூஜ்ஜியம் (Fractions and Slashed Zero)

• குறிச்சொற்கள்: `frac` (பின்னங்கள்), `zero` (வெட்டப்பட்ட பூஜ்ஜியம்)
• நோக்கம்: `frac` அம்சம் `1/2` போன்ற உரையை ஒரு உண்மையான மூலைவிட்ட பின்ன கிளிஃப் (½) ஆக அழகாக வடிவமைக்கிறது. `zero` அம்சம் நிலையான '0'-ஐ பெரிய எழுத்து 'O'-லிருந்து தெளிவாக வேறுபடுத்துவதற்காக ஒரு வெட்டு அல்லது புள்ளி கொண்ட பதிப்பால் மாற்றுகிறது, இது தொழில்நுட்ப ஆவணங்கள், வரிசை எண்கள் மற்றும் குறியீட்டில் இன்றியமையாதது.
• உயர்-நிலை CSS: `font-variant-numeric: diagonal-fractions;` மற்றும் `font-variant-numeric: slashed-zero;`
• கீழ்-நிலை CSS: `font-feature-settings: "frac" 1, "zero" 1;`

வகை 3: கெர்னிங் - இடைவெளியின் கலை

கெர்னிங்

• குறிச்சொல்: `kern`
• நோக்கம்: கெர்னிங் என்பது காட்சி ஈர்ப்பு மற்றும் வாசிப்புத்திறனை மேம்படுத்துவதற்காக தனிப்பட்ட எழுத்து ஜோடிகளுக்கு இடையிலான இடைவெளியை சரிசெய்யும் செயல்முறையாகும். எடுத்துக்காட்டாக, "AV" சேர்க்கையில், V ஆனது A-வின் கீழ் சற்று உள்ளடக்கப்பட்டுள்ளது. பெரும்பாலான தரமான எழுத்துருக்கள் நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கான இந்த கெர்னிங் ஜோடிகளைக் கொண்டுள்ளன. இது கிட்டத்தட்ட எப்போதும் இயல்பாக இயக்கப்பட்டிருந்தாலும், நீங்கள் அதைக் கட்டுப்படுத்தலாம்.
• உயர்-நிலை CSS: `font-kerning: normal;` (இயல்புநிலை) அல்லது `font-kerning: none;`
• கீழ்-நிலை CSS: `font-feature-settings: "kern" 1;` (ஆன்) அல்லது `font-feature-settings: "kern" 0;` (ஆஃப்)

வகை 4: கேஸ் மாறுபாடுகள் - பெரிய மற்றும் சிறிய எழுத்துக்களுக்கு அப்பால்

ஸ்மால் கேப்ஸ் (Small Caps)

• குறிச்சொற்கள்: `smcp` (சிறிய எழுத்துக்களிலிருந்து), `c2sc` (பெரிய எழுத்துக்களிலிருந்து)
• நோக்கம்: இந்த அம்சம் உண்மையான ஸ்மால் கேப்ஸ்களை இயக்குகிறது, அவை குறிப்பாக வடிவமைக்கப்பட்ட கிளிஃப்கள் ஆகும், அவை சிறிய எழுத்துக்களின் உயரத்தில் ஆனால் பெரிய எழுத்துக்களின் வடிவத்தில் இருக்கும். முழு அளவு பெரிய எழுத்துக்களை அளவுகோல் மூலம் குறைப்பதன் மூலம் உருவாக்கப்படும் "போலி" ஸ்மால் கேப்ஸ்களை விட இவை மிகவும் உயர்ந்தவை. சுருக்கெழுத்துக்கள், துணைத் தலைப்புகள் அல்லது முக்கியத்துவத்திற்காக அவற்றைப் பயன்படுத்தவும்.
• உயர்-நிலை CSS: `font-variant-caps: small-caps;`
• கீழ்-நிலை CSS: `font-feature-settings: "smcp" 1;`

வகை 5: ஸ்டைலிஸ்டிக் மாற்று வடிவங்கள் - வடிவமைப்பாளரின் தொடுதல்

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

ஸ்டைலிஸ்டிக் செட்கள் (Stylistic Sets)

• குறிச்சொற்கள்: `ss01` முதல் `ss20` வரை
• நோக்கம்: இது மிகவும் உற்சாகமான அம்சங்களில் ஒன்றாகும், ஆனால் இது `font-feature-settings` மூலம் மட்டுமே அணுக முடியும். ஒரு எழுத்துரு வடிவமைப்பாளர் தொடர்புடைய ஸ்டைலிஸ்டிக் மாற்று வடிவங்களை செட்களாக தொகுக்கலாம். எடுத்துக்காட்டாக, `ss01` ஒரு ஒற்றை-மாடி 'a'-ஐ செயல்படுத்தலாம், `ss02` 'y'-ன் வாலை மாற்றலாம், மற்றும் `ss03` மிகவும் வடிவியல் சார்ந்த நிறுத்தற்குறிகளின் தொகுப்பை வழங்கலாம். சாத்தியக்கூறுகள் முற்றிலும் எழுத்துரு வடிவமைப்பாளரைப் பொறுத்தது.
• கீழ்-நிலை CSS: `font-feature-settings: "ss01" 1;` அல்லது `font-feature-settings: "ss01" 1, "ss05" 1;`

ஸ்வாஷ்கள் (Swashes)

• குறிச்சொல்: `swsh`
• நோக்கம்: ஸ்வாஷ்கள் என்பது எழுத்துக்களுக்கு சேர்க்கப்படும் அலங்கார, பகட்டான அலங்காரங்கள், பெரும்பாலும் ஒரு வார்த்தையின் ஆரம்பத்திலோ அல்லது முடிவிலோ இருக்கும். அவை ஸ்கிரிப்ட் மற்றும் டிஸ்ப்ளே எழுத்துருக்களில் பொதுவானவை, மேலும் ஒரு டிராப் கேப் அல்லது லோகோவில் ஒரு ஒற்றை வார்த்தை போன்ற அதிகபட்ச தாக்கத்திற்கு மிகவும் குறைவாகவே பயன்படுத்தப்பட வேண்டும்.
• கீழ்-நிலை CSS: `font-feature-settings: "swsh" 1;`

ஒரு எழுத்துருவில் கிடைக்கும் அம்சங்களைக் கண்டறிவது எப்படி

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

1. எழுத்துரு சேவை மாதிரிப் பக்கங்கள்: பெரும்பாலான புகழ்பெற்ற எழுத்துரு நிறுவனங்கள் மற்றும் சேவைகள் (அடோப் எழுத்துருக்கள், கூகிள் எழுத்துருக்கள் மற்றும் வணிக வகை நிறுவனங்கள் போன்றவை) எழுத்துருவின் பிரதான பக்கத்தில் ஆதரிக்கப்படும் ஓபன்டைப் அம்சங்களைப் பட்டியலிட்டு விளக்கும். இது பொதுவாகத் தொடங்குவதற்கான எளிதான இடமாகும்.
2. பிரவுசர் டெவலப்பர் கருவிகள்: நவீன பிரவுசர்களில் இதற்கான அற்புதமான கருவிகள் உள்ளன. குரோம் அல்லது பயர்பாக்ஸில், ஒரு உறுப்பை ஆய்வு செய்து, "Computed" தாவலுக்குச் சென்று, முழுவதுமாகக் கீழே உருட்டவும். எந்த எழுத்துரு கோப்பு பயன்படுத்தப்படுகிறது என்பதைக் கூறும் "Rendered Fonts" பகுதியைக் காண்பீர்கள். பயர்பாக்ஸில், ஒரு பிரத்யேக "Fonts" தாவல் உள்ளது, இது தேர்ந்தெடுக்கப்பட்ட உறுப்பின் எழுத்துருவிற்கான ஒவ்வொரு ஓபன்டைப் அம்சக் குறிச்சொல்லையும் வெளிப்படையாகப் பட்டியலிடும். இது ஒரு எழுத்துருவின் திறன்களை நேரடியாக ஆராய்வதற்கான நம்பமுடியாத சக்திவாய்ந்த வழியாகும்.
3. டெஸ்க்டாப் எழுத்துரு பகுப்பாய்வு கருவிகள்: உள்ளூரில் நிறுவப்பட்ட எழுத்துரு கோப்புகளுக்கு (`.otf`, `.ttf`), நீங்கள் ஒரு எழுத்துரு கோப்பை பகுப்பாய்வு செய்து அதன் அனைத்து அம்சங்கள், ஆதரிக்கப்படும் மொழிகள் மற்றும் கிளிஃப்கள் பற்றிய விரிவான அறிக்கையை வழங்கும் சிறப்புப் பயன்பாடுகள் அல்லது வலைத்தளங்களைப் (wakamaifondue.com போன்றவை) பயன்படுத்தலாம்.

செயல்திறன் மற்றும் பிரவுசர் ஆதரவு

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

• பிரவுசர் ஆதரவு: `font-feature-settings` பண்பு பல ஆண்டுகளாக அனைத்து முக்கிய பிரவுசர்களிலும் பரவலாக ஆதரிக்கப்படுகிறது. புதிய `font-variant-*` பண்புகளுக்கும் பரவலான சிறந்த ஆதரவு உள்ளது. நீங்கள் அவற்றை நம்பிக்கையுடன் பயன்படுத்தலாம்.
• செயல்திறன்: ஓபன்டைப் அம்சங்களைச் செயல்படுத்துவது ரெண்டரிங் செயல்திறனில் மிகக் குறைவான தாக்கத்தையே ஏற்படுத்துகிறது. தர்க்கம் மற்றும் மாற்று கிளிஃப்கள் ஏற்கனவே பதிவிறக்கம் செய்யப்பட்ட எழுத்துரு கோப்பில் உள்ளன; நீங்கள் எந்த வழிமுறைகளைப் பின்பற்ற வேண்டும் என்று பிரவுசரின் ரெண்டரிங் இயந்திரத்திற்குச் சொல்கிறீர்கள். செயல்திறன் செலவு எழுத்துரு கோப்பின் அளவிலேயே உள்ளது, அது கொண்டிருக்கும் அம்சங்களைப் பயன்படுத்துவதில் அல்ல. பல அம்சங்களைக் கொண்ட ஒரு எழுத்துரு ஒரு பெரிய கோப்பாக இருக்கலாம், ஆனால் அவற்றைச் செயல்படுத்துவது அடிப்படையில் இலவசம்.

சிறந்த நடைமுறைகள் மற்றும் செயல்படுத்தக்கூடிய நுண்ணறிவுகள்

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

1. முற்போக்கான மேம்பாட்டிற்காக அம்சங்களைப் பயன்படுத்தவும்

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

2. சூழலே எல்லாம்

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

• உடல் பத்திகளுக்கு பழைய பாணி விகிதாசார எண்களைப் பயன்படுத்தவும்.
• தரவு அட்டவணைகள் மற்றும் விலை பட்டியல்களுக்கு வரிசை அட்டவணை எண்களைப் பயன்படுத்தவும்.
• உடல் உரைக்கு அல்லாமல், காட்சி தலைப்புகளுக்கு விருப்பத்தேர்வு லிகேச்சர்கள் மற்றும் ஸ்வாஷ்களைப் பயன்படுத்தவும்.
• சுருக்கெழுத்துக்கள் அல்லது லேபிள்களுக்கு ஸ்மால் கேப்ஸ்களைப் பயன்படுத்தி அவை கலக்க உதவுங்கள்.

3. CSS தனிப்பயன் பண்புகளுடன் ஒழுங்கமைக்கவும்

உங்கள் குறியீட்டை சுத்தமாகவும் பராமரிக்கக்கூடியதாகவும் வைத்திருக்க, உங்கள் அம்ச சேர்க்கைகளை CSS தனிப்பயன் பண்புகளில் (மாறிகள்) வரையறுக்கவும். இது அவற்றை சீராகப் பயன்படுத்துவதையும் ஒரே மைய இடத்திலிருந்து புதுப்பிப்பதையும் எளிதாக்குகிறது.

உதாரணம்:

            
:root {
  --font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
  --font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
  --font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}

body {
  font-feature-settings: var(--font-features-body);
}

h1, h2, h3 {
  font-feature-settings: var(--font-features-heading);
}

.price, .code, .table-cell {
  font-feature-settings: var(--font-features-data);
}

            

              
                Copy
              
            
          

4. நுட்பமே முக்கியம்

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

முடிவுரை: வலை அச்சுக்கலையின் புதிய எல்லை

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

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