Posts Tagged "font-face"

cufon மற்றும் font-face

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

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

1. Font-face

இது CSS பதிப்பு 2 இல் பிரேரிக்கப்பட்டு CSS 3 இல் இப்பொழுது பாவனைக்கு வந்திருக்கின்றது. இருந்தாலும் இது Internet Explorer இல் பதிப்பு ஐந்திலேயே வேலை செய்யும் (அட!!). எனவே ஒரு எழுத்துருவை பயன்படுத்த அதனை கீழ்வருமாறு எங்கள் CSS கோப்பில் சேர்த்துக்கொண்டால் போதும்.

@font-face {
	font-family: Baamini;
	src: url('Baamini.otf');
}

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

1. Internet Explorer இல் EOT கோப்பு மட்டும் வேலை செய்யும்.
2. Mozilla Firefox இல் OTF மற்றும் TTF வேலை செய்யும்.
3. Safari மற்றும் Opera வில் OTF, TTF மற்றும் SVG வேலை செய்யும்
4. Google Chrome இல் TTF மற்றும் SVG வேலை செய்யும்.
5. WOFF அனேக பிந்திய பதிப்பு இணைய உலாவிகளில் வேலை செய்யும்.

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

@font-face {
    font-family: 'Baamini';
    src: url('baamini.eot');
    src: url('baamini.eot?#iefix') format('embedded-opentype'),
         url('baamini.woff') format('woff'),
         url('baamini.ttf') format('truetype'),
         url('baamini.svg#ZombieA') format('svg');
}

பின்னர் நீங்கள் இதனை பயன்படுத்த வழமை போல

font-family: Baamni;

என அழைத்துக்கொண்டால் போதுமானது.

இலகுவாக உங்கள் எழுத்துருவை இவ்வாறான எல்லா வடிவங்களுக்கும் இலவசமாக மாற்றிக்கொள்ள FONT Squirrel இன் @fontface generator பயன்படும்.

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

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="YourFont.font.js" type="text/javascript"></script>

இப்பொழுது உங்கள் எழுத்துருவை உங்கள் இணையத்தளத்தோடு இணைத்தாகிவிட்டது. அவ்வெழுத்துருவை பயன்படுத்த கீழ்வருமாறு ஜாவாஸ்கிரிப்டை இணைத்துக்கொள்ள வேண்டும்.

<script type="text/javascript">
Cufon.replace('h1'); 
Cufon.replace('h2');
</script>

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

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

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;
28 ஐப்பசி, 2011