உள்ளடக்கம்
- 01. மாறி எழுத்துருக்களில் அச்சுகளைப் புரிந்து கொள்ளுங்கள்
- 02. பதிவு செய்யப்பட்ட அச்சைப் பயன்படுத்துங்கள்
- 03. தனிப்பயன் அச்சுகளை அமைக்கவும்
- 04. ஜாவாஸ்கிரிப்ட் மற்றும் மாறி எழுத்துருக்களை இணைக்கவும்
- CSS ஐ உருவாக்கு என்பதில் மாறி எழுத்துருக்களைப் பற்றி மேலும் கண்டறியவும்
மாறுபட்ட எழுத்துருக்கள் எழுத்துரு வடிவமைப்பாளர்களுக்கு எழுத்துருவுக்குள் வகை மாறுபாடுகளை வரையறுக்க உதவுகின்றன, மேலும் ஒரு எழுத்துரு கோப்பு பல எழுத்துருக்களைப் போல செயல்பட உதவுகிறது. நிலையான எழுத்துருக்கள் பல தனித்தனி எழுத்துரு கோப்புகளைக் கொண்ட எழுத்துரு குடும்பங்களாக தொகுக்கப்பட்டுள்ளன, ஒவ்வொன்றும் வெவ்வேறு பாணியைக் குறிக்கும், எடுத்துக்காட்டாக குறைந்த எடை அல்லது தைரியமான எடை. மாறி எழுத்துருக்கள் ஒரே எழுத்துரு கோப்பில் இதே தகவல்களைக் கொண்டுள்ளன.
மூல சான்ஸ் புரோவை உதாரணமாகப் பயன்படுத்தி, எழுத்துருவின் மாறி பதிப்பு சுமார் 394 கி.பை. மற்றும் பலவிதமான எடைகளில் வருகிறது. இந்த எழுத்துரு எடைகளை நாம் தனித்தனியாக நிலையான எழுத்துரு கோப்புகளாகப் பயன்படுத்தினால், அவை சராசரியாக 234kb ஆகும் - இதன் விளைவாக கோப்பு அளவு சுமார் 1856kb ஆகும். நிச்சயமாக, இந்த கணக்கீடு அனைத்து எழுத்துரு எடைகளும் தனித்தனியாக ஒரு நிலையான எழுத்துருவாக இருப்பதாகக் கருதுகிறது, அவை அவை இல்லை. (நீங்கள் வழக்கமான எழுத்துருக்களைத் தேடுகிறீர்களானாலும், கிடைக்கக்கூடிய சிறந்த இலவச எழுத்துருக்களில் எங்கள் இடுகையைப் பாருங்கள்.)
நிலையான எழுத்துருவாக இல்லாத எழுத்துருக்களை நாங்கள் அகற்றினால், ஒருங்கிணைந்த கோப்பு அளவு இன்னும் மாறி எழுத்துருவின் கிட்டத்தட்ட மூன்று மடங்கு மற்றும் கணிசமாக குறைவான பாணிகளைக் கொண்டுள்ளது. பல வலைத் திட்டங்களில் பொதுவான தைரியமான மற்றும் வழக்கமான பதிப்புகளை நீங்கள் விரும்பினாலும், நிலையான மூல சான்ஸ் புரோ எழுத்துருவின் இரண்டு பதிப்புகள் ஒற்றை மாறி எழுத்துருவை விடப் பெரியவை. இது என்னவென்றால், மாறுபட்ட எழுத்துருக்களைக் கொண்டு, எங்கள் வடிவமைப்புகளையும் படைப்பாற்றலையும் சமரசம் செய்யாமல் அலைவரிசையில் பாரிய சேமிப்பைச் செய்ய முடியும்.
மாஸ்டர் மாறுபாடுகளை ஒரு அச்சில் ஒன்றிணைப்பதன் மூலம் மாறுபடும் எழுத்துருக்கள் செயல்படுகின்றன, முக்கியமாக இடையில் புதிய புள்ளிகளை உருவாக்குகின்றன. இதன் பொருள் நீங்கள் அதிக எண்ணிக்கையிலான பாணிகளையும் மாறுபாடுகளையும் வழங்கும் அச்சுடன் தன்னிச்சையான புள்ளிகளில் எழுத்துரு எடைகளை அமைக்கலாம். மேலும், மாறி எழுத்துருக்களை ஒவ்வொரு மாறுபாட்டிற்கும் இடையில் நாம் உயிரூட்ட முடியும் என்பதனால், மெல்லிய எடையை ஒரு தைரியமான எடைக்குச் சொல்வதிலிருந்து மென்மையான மாற்றங்களை செயல்படுத்த முடியும் - இதற்கு முன்னர் நாம் ஒருபோதும் சாதிக்க முடியவில்லை.
மாறி எழுத்துருக்களை இன்னும் உற்சாகமாக்குவது என்னவென்றால், வடிவமைப்பாளர்கள் ஒரு அச்சுக்கு மட்டும் கட்டுப்படுத்தப்படவில்லை. மாறுபட்ட எழுத்துருக்கள் வெவ்வேறு பாணிகளின் வரம்பைக் குறிக்கும் பல வேறுபட்ட அச்சுகளைக் கொண்டிருக்கலாம். இதில் அமுக்கப்பட்ட, சாய்வு, ஒளியியல் அளவு அல்லது பிற படைப்பு அல்லது தனிப்பயன் விருப்பங்கள் இருக்கலாம்.
உங்கள் எழுத்துருக்களை புதிய இணையதளத்தில் வைக்க விரும்புகிறீர்களா? வலை வடிவமைப்பு ஆதாரங்களுக்காக, எங்கள் சிறந்த வலைத்தள பில்டர் ரவுண்டப் மற்றும் சிறந்த வலை ஹோஸ்டிங் சேவைகளைத் தேர்வுசெய்க. அல்லது சேமிப்பக மேம்படுத்தலுக்கு, இந்த மேகக்கணி சேமிப்பக விருப்பங்களைப் பாருங்கள்.
01. மாறி எழுத்துருக்களில் அச்சுகளைப் புரிந்து கொள்ளுங்கள்
எங்கள் CSS இல் மாறி எழுத்துருக்களைப் பயன்படுத்துவது வலையில் பொதுவாக எழுத்துருக்களை எவ்வாறு பயன்படுத்துவோம் என்பதற்கு மிகவும் ஒத்ததாகும்: ஐப் பயன்படுத்துதல் @ எழுத்துரு முகம் விதி. எவ்வாறாயினும், நாம் எந்த CSS பண்புகளைப் பயன்படுத்துகிறோம் என்பதை இது தீர்மானிப்பதால், மாறி எழுத்துருவுக்குள் உள்ள பல்வேறு வகையான அச்சுகளை நாம் முதலில் புரிந்து கொள்ள வேண்டும்.
மாறி எழுத்துருவில் இரண்டு வகையான அச்சுகள் உள்ளன: பதிவுசெய்யப்பட்ட அச்சு மற்றும் தனிப்பயன் அச்சு. பதிவுசெய்யப்பட்ட அச்சு என்பது ஒரு அச்சைக் குறிக்கிறது, இது தரப்படுத்தப்படுவதற்கு மதிப்புள்ளது. தற்போது ஐந்து பதிவு செய்யப்பட்ட அச்சுகள் உள்ளன; எடை, அகலம், சாய்ந்த, சாய்வு மற்றும் ஒளியியல் அளவு மற்றும் இவை பெரும்பாலும் எழுத்துரு எடை போன்ற ஏற்கனவே உள்ள CSS பண்புகளுடன் மாற்றப்படுகின்றன.
தனிப்பயன் அச்சுகள் டைப்ஃபேஸ் வடிவமைப்பாளர்களால் வரையறுக்கப்படுகின்றன, அவை எந்த விதமான மாறுபாடாகவும் இருக்கலாம் மற்றும் எழுத்துரு கோப்பில் நான்கு எழுத்து அடையாளங்காட்டி மட்டுமே தேவைப்படும், அவை CSS இல் குறிப்பிடப்படலாம்.
02. பதிவு செய்யப்பட்ட அச்சைப் பயன்படுத்துங்கள்
பதிவுசெய்யப்பட்ட அச்சுக்கு வரும்போது, நாங்கள் எந்த தொடர்புடைய CSS பண்புகளையும் பயன்படுத்துகிறோம் என்பதை உறுதிப்படுத்த விரும்புகிறோம், எடுத்துக்காட்டாக, எழுத்துரு-எடை அல்லது எழுத்துரு-பாணி.
ஐப் பயன்படுத்தி எங்கள் எழுத்துருக்களை அமைக்கலாம் @ எழுத்துரு முகம் விதி நாங்கள் சாதாரணமாக விரும்புவோம்; எழுத்துரு-எடை, எழுத்துரு-நீட்சி மற்றும் எழுத்துரு-பாணி போன்ற விளக்கங்களுக்கான மாறுபாடுகளை நாங்கள் எவ்வாறு வரையறுக்கிறோம் என்பதில் மாற்றம் உள்ளது. முன்னதாக நாம் ஒரு எழுத்துரு எடையை 200 ஆக அமைத்து இதை எழுத்துருவின் ஒளி பதிப்பாக வரையறுத்திருப்போம், பின்னர் தைரியமான பதிப்பிற்கும் வழக்கமான பதிப்பிற்கும் மற்றொரு எழுத்துரு முகத் தொகுதியை அமைப்போம். வடிவமைப்பு. மாறி எழுத்துருக்களுடன், எங்களுக்கு ஒரு எழுத்துரு முகம் தொகுதி மட்டுமே தேவை. எனவே பல நிகழ்வுகளைப் பயன்படுத்துவதற்குப் பதிலாக, எழுத்துரு அச்சில் வரையறுக்கப்பட்டுள்ள குறைந்தபட்ச மற்றும் அதிகபட்ச மதிப்புகளுக்கு ஒத்த மதிப்புகளின் வரம்பைக் குறிப்பிடுகிறோம்.
@ font-face {font-family: “Source Sans Variable”; src: url (“source-sans-variable.woff”) வடிவம் (“woff-variations”); எழுத்துரு எடை: 200 700; }
இந்த எடுத்துக்காட்டில், நாங்கள் 200 முதல் 700 வரை எழுத்துரு எடையை அமைத்துள்ளோம். எங்கள் வரம்பு வரையறுக்கப்பட்டவுடன், அந்த வரம்பிற்குள் எந்த எண்ணையும் எங்கள் எழுத்துரு எடையாக தேர்வு செய்யலாம், எடுத்துக்காட்டாக 658. முக்கியமாக உங்கள் எழுத்துரு எடை வரம்பை 200 முதல் 700 என அமைத்தால் மற்றும் 900 எடையை வரையறுக்க முயற்சி செய்யுங்கள், எழுத்துரு அதன் அச்சில் 900 எடை வரையறுக்கப்பட்டிருந்தாலும் அதை நீங்கள் பயன்படுத்த முடியாது. உங்கள் CSS இல் நீங்கள் அணுகக்கூடியதை வரம்பு வரையறுக்கிறது.
03. தனிப்பயன் அச்சுகளை அமைக்கவும்
தனிப்பயன் அச்சைப் பயன்படுத்தும் போது முன்பே இருக்கும் CSS பண்புகள் எதுவும் இருக்காது என்பதால், எழுத்துரு-மாறுபாடு-அமைப்புகள் எனப்படும் புதிய CSS சொத்தை நாம் பயன்படுத்த வேண்டும். இது நமக்குத் தேவையான பல பெயரிடப்பட்ட மற்றும் தனிப்பயன் அச்சுகளை வரையறுக்க உதவும்.
h1 {எழுத்துரு-குடும்பம்: ‘எனது மாறி எழுத்துரு '; எழுத்துரு-மாறுபாடு-அமைப்புகள்: ‘wght '375,‘ INLI' 88; }
இங்கே எடுத்துக்காட்டில், wght என்பது எடையின் பதிவு செய்யப்பட்ட அச்சைக் குறிக்கிறது மற்றும் ஐ.என்.எல்.ஐ இன்லைன் எனப்படும் தனிப்பயன் அச்சைக் குறிக்கிறது, ஒவ்வொன்றும் மாறுபடும் அச்சில் ஒரு புள்ளியுடன் தொடர்புடைய தொடர்புடைய எண் மதிப்பைக் கொண்டுள்ளன. எழுத்துரு-மாறுபாடு-அமைப்புகளுக்கான மதிப்பாக பதிவுசெய்யப்பட்ட அச்சை நீங்கள் குறிப்பிடும்போது, அதற்கு பதிலாக அவற்றின் வரைபட CSS பண்புகளைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.
பழைய உலாவிகளில் ஆதரவை உறுதிப்படுத்த, CSS அம்சக் கண்டறிதலைப் பயன்படுத்துவதன் மூலம் ஆதரிக்கப்படாத உலாவிகளுக்கு குறைவடையும் எழுத்துருக்களைப் பயன்படுத்தலாம்.
h1 {எழுத்துரு-குடும்பம்: “மூல சான்ஸ்”, சான்ஸ்-செரிஃப்; எழுத்துரு எடை: 700; upp ஆதரவு (எழுத்துரு-மாறுபாடு-அமைப்புகள்: இயல்பானது) {h1 {எழுத்துரு-குடும்பம்: “டெகோவர்”; எழுத்துரு-மாறுபாடு-அமைப்புகள்: “INLI” 88; }}
எழுத்துரு-மாறுபாடு-அமைப்புகள் ஆதரவைச் சோதிப்பதன் மூலம், எங்கள் மாறுபட்ட எழுத்துரு பாணிகளை ஆதரிக்கும் CSS தொகுதிக்குள் சேர்க்கலாம், அவை மாறுபட்ட எழுத்துருக்களை ஆதரிக்கக்கூடிய உலாவிகளில் மட்டுமே பயன்படுத்தப்படும் என்பதை உறுதிசெய்கிறோம் - ஆதரிக்கப்படாத உலாவிகளில் பயன்படுத்தப்படும் எங்கள் நிலையான எழுத்துருக்களுடன்.
04. ஜாவாஸ்கிரிப்ட் மற்றும் மாறி எழுத்துருக்களை இணைக்கவும்
ஜாவாஸ்கிரிப்ட் நிகழ்வுகளை நாம் இன்னும் சிறப்பாகக் கட்டுப்படுத்த விரும்பும் சூழ்நிலைகளுக்குப் பயன்படுத்தலாம் அல்லது CSS உடன் மட்டும் அணுக முடியாத நிகழ்வுகளின் அடிப்படையில் எழுத்துருவை மாற்றலாம். ஒரு எளிய எடுத்துக்காட்டு எங்கள் எழுத்துரு எடையை எங்கள் காட்சியமைப்பின் அளவோடு பொருத்துவதாகும் - காட்சிப்பகுதி சிறியதாக ஆக, எழுத்துரு எடை கனமாகிறது.
திரவ அளவை உருவாக்க, நாம் இரண்டு செட் மதிப்புகள் மற்றும் அலகுகளை சீரமைக்க வேண்டும் - எழுத்துரு எடை மற்றும் வியூபோர்ட் அளவு. சாளர.இன்னர் அகலத்தைப் பயன்படுத்தி தற்போதைய காட்சி அகல அகலத்தை அணுகலாம் மற்றும் 0–0.99 வரம்பிற்கு மாற்றுவதன் மூலம் புதிய சதவீத அடிப்படையிலான அளவை உருவாக்கலாம். குறைந்தபட்ச மற்றும் அதிகபட்ச காட்சியமைப்பு அளவுகளைச் சேர்ப்பதன் மூலம், விளைவின் வரம்பைக் கட்டுப்படுத்தலாம்.
var viewportScale = (window.innerWidth - minWindowSize) / (maxWindowSize - minWindowSize);
எங்கள் காட்சித் தளத்தின் அடிப்படையில் எழுத்துரு எடையை நாங்கள் தீர்மானிக்கிறோம்.
var fontWeightScale = viewportScale * (minFontWeight - maxFontWeight) + maxFontWeight;
CSS தனிப்பயன் பண்புகளைப் பயன்படுத்தி, எங்கள் CSS இல் எழுத்துரு எடையைப் புதுப்பிக்க எங்கள் ஜாவாஸ்கிரிப்ட் மதிப்பைப் பயன்படுத்தலாம்.
p.style.setProperty (“- எடை”, fontWeightScale);
இது ஒரு செயல்பாடாக இணைக்கப்பட்டு, மறுஅளவிடு நிகழ்வு கேட்பவருடன் இணைக்கப்படும்போது, சாளரத்தின் புதிய அளவை அடிப்படையாகக் கொண்டு எழுத்துரு எடையை புதுப்பிக்க முடியும்.
இந்த அடிப்படை அணுகுமுறையால், எல்லா வகையான நிகழ்வுகள் மற்றும் அனுபவங்களின் அடிப்படையில் எங்கள் அச்சுக்கலை மாற்றியமைக்க முடியும். காட்சிப்பகுதி அகலமாக இருக்கும் இடத்தில் நாம் மேலும் விவரங்களை வைத்திருக்க முடியும்; மாறாக, இது சிறியதாகவும், மேலும் வரையறுக்கப்பட்ட இடத்திலும் இருக்கும்போது, எழுத்துரு அகலத்தைக் குறைப்பது அல்லது எடையை அதிகரிப்பது, தெளிவு, பயன்பாட்டினை மற்றும் வடிவமைப்பு ஆகியவற்றின் அடிப்படையில் எங்கள் உள்ளடக்கம் மற்றும் அச்சுக்கலைக்கு சிறந்த கட்டுப்பாட்டை வழங்கும்.
இதற்கான குறியீட்டை நீங்கள் கோடெபனில் காணலாம்.
இந்த கட்டுரை முதலில் 318 இதழில் வெளியிடப்பட்டது நிகர, வலை வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களுக்காக உலகின் சிறந்த விற்பனையான பத்திரிகை. நிகரத்திற்கு இங்கே குழுசேரவும்.
CSS ஐ உருவாக்கு என்பதில் மாறி எழுத்துருக்களைப் பற்றி மேலும் கண்டறியவும்
26 செப்டம்பர் 2019 அன்று லண்டனின் ரிச் மிக்ஸில் நடைபெறும் வலை வடிவமைப்பாளர்களுக்கான கவனம் செலுத்தும் சிஎஸ்எஸ் மாநாட்டில் ஜெனரேட் சிஎஸ்எஸ் என்ற தனது உரையில், பியான்கா பெர்னிங், பாரம்பரிய ஊடகங்களில் எழுதப்பட்ட வார்த்தைக்கு புதிய எழுத்துருக்கள் எவ்வாறு புதிய வாய்ப்புகளை உருவாக்க முடியும் என்பதை ஆராயும். AR, VR மற்றும் கலப்பு உண்மை போன்ற அனுபவங்கள்.
இதையும் பிற சிறந்த பேச்சுகளையும் நீங்கள் பிடிக்க விரும்பினால், இப்போது உங்கள் டிக்கெட்டுகளை எடுத்துக்கொள்வது மதிப்பு. ஆகஸ்ட் 15 ஆம் தேதி மாலை 5 மணிக்குள் UTC ஐ நீங்கள் கைப்பற்றினால், நீங்கள் £ 50 ஐ சேமிக்கலாம், வெறும் £ 199 + VAT செலுத்தலாம். உங்கள் டிக்கெட்டை இப்போது வாங்கவும்!
