வலை உருவாக்கத்தில், எழுத்துரு ஸ்டைலிங்கின் சரியான பயன்பாடு பயன்பாட்டிற்கு கவர்ச்சிகரமான தோற்றத்தை அளிக்கிறது. இந்த எழுத்துரு பாணிகள் ஆவணத்தின் வாசிப்பு வரிசையைப் பற்றிய காட்சித் தடயங்களைத் தருகின்றன. எடுத்துக்காட்டாக, ஆவணத் தலைப்பின் எழுத்துரு நடை தைரியமாகவும் மற்றவர்களிடமிருந்து குறிப்பிடத்தக்கதாகவும் இருக்க வேண்டும். ஸ்டைலிங் மற்றவற்றிலிருந்து முக்கியமான உள்ளடக்கத்தை வேறுபடுத்த உதவுகிறது.
இந்தக் கட்டுரையின் கற்றல் முடிவுகள்:
- Google Web எழுத்துருக்கள் என்றால் என்ன?
- HTML இல் Google எழுத்துருக்களை எவ்வாறு இறக்குமதி செய்வது?
- CSS கோப்பில் Google எழுத்துருக்களை எவ்வாறு பயன்படுத்துவது?
Google Web எழுத்துருக்கள் என்றால் என்ன?
கூகிள் வலை எழுத்துரு என்பது நூற்றுக்கணக்கான எழுத்துரு பாணிகள் அல்லது குடும்பங்களைக் கொண்ட ஒரு திறந்த மூல நூலகமாகும். இது ஆண்ட்ராய்டு மற்றும் CSS உடன் வலை எழுத்துருக்களைப் பயன்படுத்த உதவும் API களையும் வழங்குகிறது. Google எழுத்துருக்கள் மற்ற எழுத்துரு நூலகங்களை விட மிகவும் இலகுவானவை மற்றும் வணிக பயன்பாட்டிற்கு இலவசமாகக் கிடைக்கின்றன. எந்த இணையதளத்திலும் இவற்றைச் செயல்படுத்துவது எளிது.
இயல்பாக, CSS கற்பனை, செரிஃப், சான்ஸ் செரிஃப், கர்சீவ் மற்றும் மோனோஸ்பேஸ் எழுத்துரு பாணிகளை வழங்குகிறது. நீங்கள் வேறு சில எழுத்துரு பாணிகளைப் பயன்படுத்த விரும்பினால் Google எழுத்துருக்களைப் பயன்படுத்தலாம்.
HTML இல் Google எழுத்துருக்களை எவ்வாறு இறக்குமதி செய்வது?
HTML பக்கத்தில் Google எழுத்துருக்களைப் பயன்படுத்த, பின்வரும் படிகளைப் பின்பற்றவும்.
படி 1: எழுத்துரு குடும்பத்தைத் தேர்ந்தெடுக்கவும்
முதலில், திறக்கவும் Google எழுத்துருக்கள் அதிகாரப்பூர்வ இணையதளத்தில் நீங்கள் விரும்பும் எழுத்துருவைத் தேர்ந்தெடுக்கவும். உதாரணமாக, நாங்கள் தேர்ந்தெடுத்துள்ளோம் ' இரால் இரண்டு ' எழுத்துரு குடும்பம்:
படி 2: பாங்குகளைத் தேர்ந்தெடுக்கவும்
அடுத்து, பாணிகளின் பட்டியலைக் காண கீழே உருட்டவும். '' என்பதைக் கிளிக் செய்வதன் மூலம் அவற்றை உங்கள் சேகரிப்பில் சேர்க்கவும் + 'அடையாளம்:
படி 3: தேர்ந்தெடுக்கப்பட்ட குடும்பங்களைப் பார்க்கவும்
தேர்ந்தெடுக்கப்பட்ட குடும்பங்களைப் பார்க்க, கீழே சிறப்பிக்கப்பட்டுள்ள ஐகானைக் கிளிக் செய்யவும்:
படி 4: HTML இல் உட்பொதிக்க இணைப்பை நகலெடுக்கவும்
அதன் பிறகு, கீழே ஸ்க்ரோல் செய்து, ஹைலைட் செய்யப்பட்ட 'ஐப் பயன்படுத்தி எழுத்துரு குடும்பத்தின் இணைப்பை நகலெடுக்கவும். நகலெடுக்கவும் 'ஐகான்:
CSS கோப்பில் Google எழுத்துருக்களை எவ்வாறு பயன்படுத்துவது?
கூகிள் எழுத்துருக்களின் நகலை CSS இல் ஸ்டைலிங்கிற்குப் பயன்படுத்த, கொடுக்கப்பட்ட எடுத்துக்காட்டுகளைப் பார்க்கவும்.
எடுத்துக்காட்டு 1
ஒரு ' சில உள்ளடக்கம் அல்லது பத்தியைக் குறிப்பிடுவதற்கான உறுப்பு:
< ப > 'சிறந்த பயிற்சி இணையதளம்' ப >கூகுள் எழுத்துருக்களை இறக்குமதி செய்ய, நகலெடுக்கப்பட்ட குறியீட்டை '' இல் ஒட்டவும் <பாணி> HTML கோப்பின் 'குறிச்சொல்:
@ இறக்குமதி url ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;உடை 'p' உறுப்பு
ப {எழுத்துரு குடும்பம்: 'லோப்ஸ்டர் டூ' , கர்சீவ்;
text-align: மையம்;
எழுத்துரு அளவு: 45px;
நிறம்: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
பின்வரும் விளக்கப்பட்ட CSS பண்புகள் HTML க்கு பயன்படுத்தப்படுகின்றன ' 'குறிச்சொல்:
- ' எழுத்துரு குடும்பம் 'மதிப்புடன் ஒதுக்கப்பட்டுள்ளது' ‘லோப்ஸ்டர் டூ’, கர்சீவ் ”. இந்த எழுத்துரு குடும்பம் Google எழுத்துருக்களிலிருந்து இறக்குமதி செய்யப்பட்டது.
- ' உரை-சீரமைப்பு ” உரை சீரமைப்பை சரிசெய்கிறது.
- ' எழுத்துரு அளவு ” எழுத்துரு அளவை தீர்மானிக்கிறது.
- ' நிறம் ” எழுத்துரு நிறத்தை அமைக்கிறது.
எழுத்துரு குடும்பம் வெற்றிகரமாகப் பயன்படுத்தப்பட்டதை படம் காட்டுகிறது:
உதாரணம் 2
இறக்குமதி செய்ய மற்றொரு உதாரணத்தை எடுத்துக்கொள்வோம் ' நேர்கோ ஒன் ” கூகுள் எழுத்துரு. இந்த நோக்கத்திற்காக, 'Nerko One' Google எழுத்துரு URL க்கான குறியீட்டை மீண்டும் ஒட்டவும் <பாணி> ”உறுப்பு:
@ இறக்குமதி url ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;உடை 'p' உறுப்பு
ப {எழுத்துரு குடும்பம்: 'நெர்கோ ஒன்' , கர்சீவ்;
எழுத்துரு எடை: 300 ;
எழுத்துரு அளவு: 30px;
}
' எழுத்துரு குடும்பம் ”,” எழுத்துரு-எடை ', மற்றும் ' எழுத்துரு அளவு 'பண்புகள் HTML க்கு பயன்படுத்தப்படுகின்றன' ”உறுப்பு.
வெளியீடு
CSS கோப்பில் Google வலை எழுத்துருக்களை எவ்வாறு இறக்குமதி செய்வது என்பதை நாங்கள் உங்களுக்குக் கற்பித்துள்ளோம்.
முடிவுரை
CSS இல் Google எழுத்துருக்களை இறக்குமதி செய்ய, முதலில் இங்கு செல்க Google எழுத்துருக்கள் அதிகாரப்பூர்வ வலைத்தளம் மற்றும் எழுத்துரு பாணியைத் தேர்ந்தெடுக்கவும். பின்னர், '' உள்ள குறியீட்டை நகலெடுக்கவும் @இறக்குமதி 'முக்கிய வார்த்தை மற்றும் அதை CSS கோப்பில் ஒட்டவும்' <பாணி> HTML கோப்பின் உறுப்பு. இந்த ஆய்வு கூகுள் எழுத்துருக்களை CSS கோப்பில் இறக்குமதி செய்வதற்கான முழுமையான செயல்முறையை நிரூபித்துள்ளது.