forked from enathu/tamil-web-fonts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (113 loc) · 13.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tamil Web Fonts ℜ beautifying the Tamil typography.</title>
<link rel="stylesheet" href="type.css">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Tharique Azeez">
<link rel="shortcut icon" href="img/favicon.png"/>
<meta name="description" content="Tamil Web Fonts from Google - Adding beautiful to the Tamil typography.">
<meta name="Keywords" content="tamil, web fonts, webfonts, google fonts, tamil web fonts, tamil web font, tamil fonts, google tamil fonts, tamil unicode fonts, web unicode tamil fonts, tamil unicode fonts, fonts tamil, download tamil fonts, tamil fonts free">
</head>
<body>
<img id="logo" src="img/logo.png" alt="logo" width="50" height="40">
<div class="banner">
<ul>
<li>
<div class="inner">
<h1>தமிழ் எழுத்துக்களுக்கு அழகு சேர்த்தல்</h1>
<p>கூகிள் இணைய எழுத்துருக்கள் வைப்பகத்திலிருந்து தமிழுக்கு</p>
</div>
</li>
</ul>
</div>
<div class="intro">
<div class="demo wrap">
<p>இணைய எழுத்துருக்கள் எனப்படும் web fonts, இணையப் பக்கங்களின் அழகான தோற்றத்திற்கு
அண்மைக் காலமாக ஆதாரமாக இருந்து வருகின்றன. ஆங்கில எழுத்துருக்களின் பல்வேறு வடிவுடைய நிலைகளை கூகிள் <a href="http://www.google.com/webfonts">Google web fonts</a> என்கின்ற தளத்தின் மூலமாக வழங்கி வருகிறது. அண்மையில் முன்பார்க்கை நிலையில் தமிழ் வடிவ எழுத்துருக்கள் சிலவற்றை கூகிள் <a href="http://www.google.com/webfonts/earlyaccess">வெளியிட்டது</a>. அவற்றைப் பயன்படுத்தி எவ்வாறு இணையப்பக்கங்களை எழுத்துக்கள் நிலையில் எழிலாக்கலாம் என்பதைக் காட்டுகின்ற எடுத்துக்காட்டான பக்கமே இது. வெளியிடப்பட்டுள்ள எழுத்துருக்களின் வடிவமைப்பு மாதிரிகளைக் கீழே காணலாம்.</p>
</div>
</div>
<div class="font">
<div class="demo karla wrap">
<h3>Karla Tamil Inclined</h3>
<p>மதியாதார் முற்றம் மதித்தொரு காற்சென்று
மிதியாமை கோடி பெறும்<br/>
உண்ணீ ருண்ணீரென் றுபசரியார் தம்மனையில்
உண்ணாமை கோடி பெறும்<br/>
கோடி கொடுப்பினும் குடிப்பிறந்தார் தம்முடனே
கூடுதலே கோடி பெறும்<br/>
கோடானு கோடி கொடுப்பினுந் தன்னுடைநாக்
கோடாமை கோடி பெறும்<br/>
<em>- ஔவையார்</em>.</p>
</div>
</div>
<div class="font-two">
<div class="demo karla-right wrap">
<h3>Karla Tamil Upright</h3>
<p>கல்லாரே யாயினும் கற்றாரைச் சேர்ந்தொழுகின்<br/>
நல்லறிவு நாளும் தலைப்படுவர் - தொல்சிறப்பின்<br/>
ஒண்ணிறப் பாதிரிப்பூச் சேர்தலாற் புத்தோடு<br/>
தண்ணீர்க்குத் தான்பயந் தாங்கு.<br/>
<em>- நாலடியார்</em></p></div>
</div>
<div class="font">
<div class="demo lohit wrap">
<h3>Lohit Tamil</h3>
<p>தேடிச் சோறு நிதம் தின்று – பல<br/>
சின்னஞ் சிறுகதைகள் பேசி – மனம்<br/>
வாடித் துன்பமிக உழன்று – பிறர் <br/>
வாடப் பலசெயல்கள் செய்து – நரை <br/>
கூடிக் கிழப்பருவ மெய்தி – கொடுங்<br/>
கூற்றுக் கிரையனப்பின் மாயும் – பல<br/>
வேடிக்கை மனிதரைப் போலே – நான் <br/>
வீழ்வே னென்று நினைத்தாயோ? <br/>
<em>-பாரதி</em> </p>
</div>
</div>
<div class="font-two">
<div class="demo noto wrap">
<h3>Noto Sans Tamil</h3>
<p>“உன்னை தோல்வி என்று அழைக்கும் தேட்டத்தோடு இங்கு பலர் இருப்பார்கள், அவர்கள் உன்னை தோற்றவன் எனச் சொல்லலாம். முட்டாள் என்று முந்திக் கொண்டு சொல்லலாம். நம்பிக்கையற்ற ஆன்மா என்று கூட சொல்ல முனையலாம். அதை நீ ஒருபோதும் உன்னை நோக்கி சொல்லிவிடாதே. அப்படிச் சொல்வாயாயின் நீ பிழையான சமிஞ்சையை மற்றவருக்கு வழங்குகிறாய். அதைத்தான் அவர்கள் பற்றிக் கொண்டு உன்னை அப்படி அழைக்க ஆர்வம் கொள்கின்றனர். புரிகிறதா உனக்கு?<br/><br/></p>
<p>எதைப் பற்றியாவது நீ தேவை கொண்டிருந்தால், அதற்காக உழை. சுவரில் போய் மோதுண்டால், அதைத் தள்ளிக் கொண்டு நகர முற்படு. டின்டின், தோல்வியைப் பற்றி நீ ஒரு விடயத்தை அறிந்து கொள்ள வேண்டும்: உன்னைத் தோற்கடித்துவிட தோல்விக்கு நீ இடம் தரக்கூடாது. <br/><br/>
<em>- கேப்டன் கெட்டோக் - டின்டின்னின் சாகசங்கள்.</em></p>
</div>
</div>
<div class="font">
<div class="demo noto-ui wrap">
<h3>Noto Sans Tamil UI</h3>
<p>சீத மதிக்குடைக்கீழ்ச் செம்மை அறங்கிடப்பத்<br/>
தாதவிழ்பூந் தாரான் தனிக்காத்தான் - மாதர்<br/>
அருகூட்டும் பைங்கிளியும் ஆடற் பருந்தும்<br/>
ஒருகூட்டில் வாழ வுலகு.</p>
<p>
நாற்குணமும் நாற்படையா வைம்புலனும் நல்லமைச்சா<br/>
ஆர்க்குஞ் சிலம்பே யணிமுரசா - வேற்படையும்<br/>
வாளுமே கண்ணா வதன மதிக்குடைக்கீழ்<br/>
ஆளுமே பெண்மை யரசு.<br/>
<em>- நளவெண்பா</em> </p>
</div>
</div>
<div class="font-two">
<div class="demo droid-sans wrap">
<h3>Droid Sans Tamil</h3>
<p>வந்தியத்தேவன் வாளைச் சிறிது நேரம் உற்றுப் பார்த்துக் கொண்டிருந்தான். அதன் அடிப்பகுதியில், பிடியின் பக்கத்தில் மீன் உருவம் பொறிக்கப்பட்டிருப்பதைப் பார்த்து வியந்தான். மீன் உருவம் எதற்காக? அதற்கு ஏதேனும் பொருள் உண்டா? வெறும் அலங்காரத்துக்குத்தானா? </p>
<p>கொல்லன் அந்த மீன் உருவம் உள்ள இடத்தை மறுபடியும் தீயில் காட்டிக் காய்ச்சி அதன் பேரில் சுத்தியால் அடித்தான் மீன் உருவம் தெரியாமல் மறைப்பதுதான் அவனுடைய நோக்கம் என்று தோன்றியது. எதற்காக இக்காரியம் என்று வல்லவரையன் யோசனை செய்தான். யோசனை செய்து கொண்டிருக்கும் போதே, அவன் கண்கள் சுழலத் தொடங்கின. பல நாளாக அவனால் விரட்டியடிக்கப்பட்டு வந்த நித்திராதேவி இப்போது தன் மோக மாயவலையை அவன் பேரில் பலமாக வீச ஆரம்பித்தாள். வந்தியத்தேவன் அதிலிருந்து தப்ப முடியவில்லை. சிறிது நேரம் உட்கார்ந்தபடியே ஆடி விழுந்தான். பிறகு அப்படியே கொல்லன் உலைக்குப் பக்கத்தில், படுத்துத் தூங்கிப் போனான். </p>
<p>தூக்கத்தில் வல்லவரையன் பல பயங்கரக் கனவுகள் கண்டான். கத்தியைப் பற்றியே ஒரு கனவு. ஒருவன் வந்து கொல்லனிடம் கத்தியைத் திரும்பக் கேட்டான், கொல்லன் கொடுத்தான். "என்ன கூலி வேண்டும்?" என்று அவன் கேட்டான். "கூலி ஒன்றும் வேண்டாம். பழுவூர் இளையராணிக்கு நான் அளிக்கும் காணிக்கையாயிருக்கட்டும்" என்றான் கொல்லன். <br/>
<em>- பொன்னியின் செல்வன் </em></p></div>
</div>
<div id="download" class="wrap footer">
<span class="twitter"><center><a href="https://twitter.com/enathu" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @enathu</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="அழகிய தமிழ் இணைய எழுத்துருக்கள் பயன்படுத்தப்பட்ட நிலை" data-via="enathu" data-size="large" data-hashtags="TamilWebFont">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center></span>
<br>
<p>நான் தாரிக் அஸீஸ் - <a href="http://niram.wordpress.com">நிறத்தில்</a> நான் உதய தாரகை - நன்றி :) <small>2013.01.16</small><img src="http://goo.gl/jOvCI" alt="for stats" /></p>
</div>
<style type="text/css">
#niram:hover{background-position:0px -88px !important;}
</style>
<div id="niram" style="margin: 0px;padding: 0px;background: transparent url(http://files.niram.org/badge/badge-niram.png) no-repeat scroll 0px 0px;height: 88px;right: 0px;position: fixed;bottom: 25px;width: 98px; z-index: 9999999 !important;-webkit-transition: background-position 100ms ease-in;-moz-transition: background-position 100ms ease-in;-ms-transition: background-position 100ms ease-in;-o-transition: background-position 100ms ease-in;transition: background-position 100ms ease-in;" ><a href="http://niram.org" target="_blank" style="margin: 0px;padding: 0px;display: block;height: 88px;width: 98px;text-indent: -9999px;border: none;">Niram Labs</a></div>
</body>
</html>