CSS Google Fonts
Google Fonts என்பது இலவசமாகப் பயன்படுத்தக்கூடிய 1000 க்கும் மேற்பட்ட எழுத்துருக்களை வழங்குகிறது.
HTML இல் உள்ள நிலையான எழுத்துருக்களைப் பயன்படுத்த விரும்பவில்லை என்றால், Google Fonts ஐப் பயன்படுத்தலாம்.
Google Fonts ஐ எவ்வாறு பயன்படுத்துவது
HTML இன் <head> பிரிவில் ஒரு சிறப்பு ஸ்டைல் ஷீட் இணைப்பைச் சேர்த்து, CSS இல் எழுத்துருவைக் குறிப்பிடவும்.
எடுத்துக்காட்டு: "Sofia" எழுத்துரு
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>எடுத்துக்காட்டு: "Trirong" எழுத்துரு
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>குறிப்பு:
CSS இல் எழுத்துருவைக் குறிப்பிடும்போது, குறைந்தபட்சம் ஒரு பின்வாங்கு எழுத்துருவைப் பட்டியலிடுங்கள் (எதிர்பாராத நடத்தைகளைத் தவிர்க்க). எனவே, பட்டியலின் முடிவில் ஒரு பொதுவான எழுத்துரு குடும்பத்தையும் (serif அல்லது sans-serif போன்றவை) சேர்க்கவும்.
பல Google Fonts ஐப் பயன்படுத்துதல்
பல Google Fonts ஐப் பயன்படுத்த, எழுத்துரு பெயர்களை ஒரு பைப் கேரக்டர் (|) உடன் பிரிக்கவும்.
எடுத்துக்காட்டு
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>எச்சரிக்கை:
பல எழுத்துருக்களைக் கோருவது உங்கள் வலைப்பக்கங்களை மெதுவாக்கலாம்! எனவே அதைப் பற்றி கவனமாக இருங்கள்.
Google Fonts ஸ்டைலிங்
நீங்கள் விரும்பும் விதத்தில் Google Fonts ஐ CSS உடன் ஸ்டைல் செய்யலாம்!
எடுத்துக்காட்டு: "Sofia" எழுத்துருவை ஸ்டைல் செய்தல்
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>எழுத்துரு விளைவுகளை இயக்குதல்
Google வெவ்வேறு எழுத்துரு விளைவுகளை இயக்கியுள்ளது, அதை நீங்கள் பயன்படுத்தலாம்.
முதலில் Google API க்கு effect=effectname ஐச் சேர்க்கவும், பின்னர் சிறப்பு விளைவைப் பயன்படுத்த இருக்கும் உறுப்புக்கு ஒரு சிறப்பு வகுப்புப் பெயரைச் சேர்க்கவும். வகுப்புப் பெயர் எப்போதும் font-effect- உடன் தொடங்கி effectname உடன் முடிகிறது.
எடுத்துக்காட்டு: "Sofia" எழுத்துருவில் தீ விளைவைச் சேர்த்தல்
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>எடுத்துக்காட்டு: பல விளைவுகள்
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>Google Fonts பயிற்சி
Google Fonts இல் எழுத்துரு விளைவுகளைச் சேர்க்க எந்த குணம் பயன்படுத்தப்படுகிறது?
Google Fonts இல் எழுத்துரு விளைவுகளைச் சேர்க்க எந்த குணம் பயன்படுத்தப்படுகிறது?
கூடுதல் வளங்கள்:
அனைத்து கிடைக்கும் Google Fonts இன் பட்டியலுக்கு, எங்கள் How To - Google Fonts Tutorial ஐப் பார்வையிடவும்.