alef-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +30 -0
- data/Rakefile +1 -0
- data/alef-rails.gemspec +23 -0
- data/app/assets/fonts/Alef-Bold.eot +0 -0
- data/app/assets/fonts/Alef-Bold.svg +435 -0
- data/app/assets/fonts/Alef-Bold.ttf +0 -0
- data/app/assets/fonts/Alef-Bold.woff +0 -0
- data/app/assets/fonts/Alef-Regular.eot +0 -0
- data/app/assets/fonts/Alef-Regular.svg +435 -0
- data/app/assets/fonts/Alef-Regular.ttf +0 -0
- data/app/assets/fonts/Alef-Regular.woff +0 -0
- data/app/assets/fonts/Alef-bold.html +776 -0
- data/app/assets/fonts/Alef-regular.html +776 -0
- data/app/assets/stylesheets/alef.css.erb +24 -0
- data/config/routes.rb +2 -0
- data/lib/alef/rails.rb +2 -0
- data/lib/alef/rails/engine.rb +6 -0
- data/lib/alef/rails/version.rb +5 -0
- metadata +93 -0
|
@@ -0,0 +1,776 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
2
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
3
|
+
|
|
4
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
7
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
8
|
+
<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
|
10
|
+
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
|
|
11
|
+
|
|
12
|
+
<style type="text/css">
|
|
13
|
+
body{
|
|
14
|
+
font-family: 'Alef';
|
|
15
|
+
font-weight: normal;
|
|
16
|
+
}
|
|
17
|
+
.sidebar ol li{
|
|
18
|
+
list-style: decimal;
|
|
19
|
+
margin: 0 24px 10px 0;
|
|
20
|
+
line-height: 1.4em;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<title>Alef Regular Specimen</title>
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<script type="text/javascript" charset="utf-8">
|
|
28
|
+
$(document).ready(function() {
|
|
29
|
+
$('#container').easyTabs({defaultContent:1});
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
32
|
+
</head>
|
|
33
|
+
|
|
34
|
+
<body dir="rtl">
|
|
35
|
+
<div id="container">
|
|
36
|
+
<div id="header">
|
|
37
|
+
אלף רגיל </div>
|
|
38
|
+
<ul class="tabs">
|
|
39
|
+
<li><a href="#specimen">Specimen</a></li>
|
|
40
|
+
<li><a href="#layout-h">Sample Layout - Heb</a></li>
|
|
41
|
+
<li><a href="#layout-e">Sample Layout - Eng</a></li>
|
|
42
|
+
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
|
43
|
+
<li><a href="#installing">Installing Webfonts</a></li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
|
|
47
|
+
<div id="main_content">
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
<div id="specimen">
|
|
51
|
+
|
|
52
|
+
<div class="section">
|
|
53
|
+
<div class="grid12 firstcol">
|
|
54
|
+
<div class="huge">אבגד</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="section">
|
|
59
|
+
<div class="glyph_range">א​ב​ג​ד​ה​ו​ז​ח​ט​י​כ​ך​ל​מ​ם​נ​ן​ס​ע​פ​ף​צ​ץ​ק​ר​ש​ת​A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="section">
|
|
62
|
+
<div class="grid12 firstcol">
|
|
63
|
+
<table class="sample_table">
|
|
64
|
+
<tr><td>10</td><td class="size10">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
65
|
+
<tr><td>11</td><td class="size11">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
66
|
+
<tr><td>12</td><td class="size12">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
67
|
+
<tr><td>13</td><td class="size13">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
68
|
+
<tr><td>14</td><td class="size14">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
69
|
+
<tr><td>16</td><td class="size16">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
70
|
+
<tr><td>18</td><td class="size18">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
71
|
+
<tr><td>20</td><td class="size20">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
72
|
+
<tr><td>24</td><td class="size24">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
73
|
+
<tr><td>30</td><td class="size30">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
74
|
+
<tr><td>36</td><td class="size36">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
75
|
+
<tr><td>48</td><td class="size48">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
76
|
+
<tr><td>60</td><td class="size60">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
77
|
+
<tr><td>72</td><td class="size72">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
78
|
+
<tr><td>90</td><td class="size90">אבגדהוזחטיכךלמםנןסעפףצץקרשתabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
|
79
|
+
</table>
|
|
80
|
+
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<div class="section" id="bodycomparison">
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<div id="xheight">
|
|
91
|
+
<div class="fontbody">לגוף</div><div class="arialbody">לגוף</div><div class="verdanabody">לגוף</div><div class="georgiabody">לגוף</div></div>
|
|
92
|
+
<div class="fontbody" style="z-index:1">
|
|
93
|
+
לגוף<span>Alef</span>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="arialbody" style="z-index:1">
|
|
96
|
+
לגוף<span>Arial</span>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="verdanabody" style="z-index:1">
|
|
99
|
+
לגוף<span>Verdana</span>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="georgiabody" style="z-index:1">
|
|
102
|
+
לגוף<span>Georgia</span>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<div class="section psample psample_row1" id="">
|
|
111
|
+
|
|
112
|
+
<div class="grid2 firstcol">
|
|
113
|
+
<p class="size10"><span>10.</span> זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>
|
|
114
|
+
|
|
115
|
+
</div>
|
|
116
|
+
<div class="grid3">
|
|
117
|
+
<p class="size11"><span>11.</span> זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>
|
|
118
|
+
|
|
119
|
+
</div>
|
|
120
|
+
<div class="grid3">
|
|
121
|
+
<p class="size12"><span>12.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
<div class="grid4">
|
|
125
|
+
<p class="size13"><span>13.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>
|
|
126
|
+
|
|
127
|
+
</div>
|
|
128
|
+
<div class="white_blend"></div>
|
|
129
|
+
|
|
130
|
+
</div>
|
|
131
|
+
<div class="section psample psample_row2" id="">
|
|
132
|
+
<div class="grid3 firstcol">
|
|
133
|
+
<p class="size14"><span>14.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
<div class="grid4">
|
|
137
|
+
<p class="size16"><span>16.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
138
|
+
|
|
139
|
+
</div>
|
|
140
|
+
<div class="grid5">
|
|
141
|
+
<p class="size18"><span>18.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
142
|
+
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div class="white_blend"></div>
|
|
146
|
+
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="section psample psample_row3" id="">
|
|
150
|
+
<div class="grid5 firstcol">
|
|
151
|
+
<p class="size20"><span>20.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="grid7">
|
|
154
|
+
<p class="size24"><span>24.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="white_blend"></div>
|
|
158
|
+
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="section psample psample_row4" id="">
|
|
162
|
+
<div class="grid12 firstcol">
|
|
163
|
+
<p class="size30"><span>30.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="white_blend"></div>
|
|
166
|
+
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<div class="section psample psample_row1 fullreverse">
|
|
172
|
+
<div class="grid2 firstcol">
|
|
173
|
+
<p class="size10"><span>10.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
174
|
+
|
|
175
|
+
</div>
|
|
176
|
+
<div class="grid3">
|
|
177
|
+
<p class="size11"><span>11.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
<div class="grid3">
|
|
181
|
+
<p class="size12"><span>12.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
182
|
+
|
|
183
|
+
</div>
|
|
184
|
+
<div class="grid4">
|
|
185
|
+
<p class="size13"><span>13.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
186
|
+
|
|
187
|
+
</div>
|
|
188
|
+
<div class="black_blend"></div>
|
|
189
|
+
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="section psample psample_row2 fullreverse">
|
|
193
|
+
<div class="grid3 firstcol">
|
|
194
|
+
<p class="size14"><span>14.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
195
|
+
|
|
196
|
+
</div>
|
|
197
|
+
<div class="grid4">
|
|
198
|
+
<p class="size16"><span>16.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
199
|
+
|
|
200
|
+
</div>
|
|
201
|
+
<div class="grid5">
|
|
202
|
+
<p class="size18"><span>18.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
203
|
+
|
|
204
|
+
</div>
|
|
205
|
+
<div class="black_blend"></div>
|
|
206
|
+
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div class="section psample fullreverse psample_row3" id="">
|
|
210
|
+
<div class="grid5 firstcol">
|
|
211
|
+
<p class="size20"><span>20.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="grid7">
|
|
214
|
+
<p class="size24"><span>24.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<div class="black_blend"></div>
|
|
218
|
+
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
|
222
|
+
<div class="grid12 firstcol">
|
|
223
|
+
<p class="size30"><span>30.</span>זה רעך יצחק הטייס, מתעופף כנשר גדול בין שמים וארץ. The quick brown fox jumps over the lazy dog. זה רעך יצחק the dog, מתעופף כנשר גדול over the lazy שועל. גם אני כמו כל היהודים עסוק במספרים 24/7, 12 חודשים. Abc, easy as 123. Or simple as do, re, mi. Abc, 123, baby, you and me girl</p>>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="black_blend"></div>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div id="layout-h" class="layout">
|
|
235
|
+
|
|
236
|
+
<div class="section">
|
|
237
|
+
|
|
238
|
+
<div class="grid12 firstcol">
|
|
239
|
+
<h1>אות פתיחה</h1>
|
|
240
|
+
<h2>28.7.12 — סט אותיות מלא בעברית ולטינית, כולל נִיקּוּד מְתוּכְנָת!</h2>
|
|
241
|
+
|
|
242
|
+
<p class="byline">ע"י <a href="#link">מיכל סהר והטייס (הגילדה) ומושון זר־אביב</a></p>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="section">
|
|
246
|
+
<div class="grid8 firstcol">
|
|
247
|
+
<p class="large">אות פתיחה – עיצוב ותיעוד יצירת טיפוס־אות עברית מותאם למסך וחופשי לשימוש. </p>
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
<h3>המרחב הטכנולוגי הקיים והצורך ביוזמה עברית</h3>
|
|
251
|
+
|
|
252
|
+
<p>בשנים האחרונות מתחזקת מגמה שבה אפילו דוברי עברית מעדיפים כתיבה וקריאה באנגלית על פני עברית. אתרי אינטרנט ישראליים מוותרים על העברית בכלל ועושה רושם שמקומה של העברית ברשת ובמכשירים ניידים בפרט ועל גבי מסכים בכלל הולך ונדחק. אין ספק שלגלובליזציה ולשליטתה של השפה האנגלית ברשת יש תפקיד מרכזי במגמה אך ישנו היבט נוסף לבעיה שאתו דווקא ניתן להתמודד. רמת הקריאוּת של טקסט על מסך נקבעת על ידי עיצוב האותיות, אופיין, הדרך שבה הן מסודרות יחד ובעיקר הדרך בה הן מיוצגות על המסך בגדלים קטנים. נושא זה כמעט מוזנח לחלוטין בשפה העברית. </p>
|
|
253
|
+
|
|
254
|
+
<p>בזמן שבאירופה וארה"ב עוסקים כבר שנים בהתאמת גופנים למסך, בעברית ההיצע נמוך ביותר ולמעשה נוצר מצב שבו על אף הפוטנציאל הרחב, מעצבי ממשק ואתרים עדיין נאלצים להשתמש כמעט בלעדית בגופן 'אריאל, אשר נותן מענה מצומצם מאוד לצרכים המגוונים הנדרשים כיום. יתרה מזאת, 'אריאל' עוצב בהשראת הגופן 'נרקיס חדש' כניסיון ליצר גרסה עברית לגופן הלועזי 'Arial' שאף הוא פותח כגרסה לקויה לגופן הסנס-סריפי המודרני 'Helvetica'.</p>
|
|
255
|
+
|
|
256
|
+
<p>בשנה האחרונה (מאז השקת הדפדפן Firefox 3.6) יושם תקן ה-@font-face בכל הדפדפנים הפופולריים. @font-face מאפשר להטמיע כל פונט בדף אינטרנט בדומה לשימוש בתמונה. אימוץ רחב זה של סטנדרטים אינטרנטיים פתח מגוון רחב של אפשרויות למפתחים מעצבים ומשתמשים להרחיב את השימוש מעבר למגוון המצומצם של הגופנים הקנייניים המוטמעים במערכות ההפעלה. התפתחות זו מורגשת בצורה רחבה בעולם ובאה לידי ביטוי הן בשירותי טיפוגרפיה מקוונים כמו Typekit.com, הן בספריות גופנים חופשיים כגון Google Font Library והן בפריחה של עיצוב טיפוגרפי עשיר ואיכותי ברשת כולה. עם זאת, אימוץ התקן לא פתר את הבעיה כולה. על מנת להשתמש בפונט לקריאת טקסט יש להתאימו למסך, אחרת האותיות מטושטשות ורמת הקריאוּת נפגמת.</p>
|
|
257
|
+
|
|
258
|
+
<p>יש צורך בגופנים עבריים אותנטיים אשר יבטיחו קריאוּת גבוהה ויעוצבו על בסיס מורשת הכתב העברי ועל פי הדרישות הקפדניות של עיצוב טיפוגרפי למסך (במיוחד בגדלים קטנים). יש לפתח תיעוד שקוף, פתוח ונגיש לציבור הרחב על מנת ליצר בסיס מקצועי וטכני לעיצוב גופני מסך עבריים נוספים. בפנינו חלון ההזדמנויות נדיר, לעודד עיצוב אותיות איכותי כאתגר מקומי לפיתוח גופנים כתוכנה חופשית.</p>
|
|
259
|
+
|
|
260
|
+
<p>אנו פועלים לקבל סיוע רשמי של יצרניות התוכנה המובילות בישראל ובעולם, לתמוך בפרויקט הן כלכלית והן על ידי התחייבות לשיווקו של הגופן במסגרת חבילת הגופנים הכלולה במערכת ההפעלה. גוגל היא הראשונה שהתחייבה לתמוך בפרויקט, אך עם זאת, בכוונתנו לקדם שיתופי פעולה דומים גם עם גופים כמו מיקרוסופט ואפל.</p>
|
|
261
|
+
|
|
262
|
+
<h3>מי אנחנו?</h3>
|
|
263
|
+
|
|
264
|
+
<p>"הגילדה" היא חברת בוטיק לעיצוב פונטים שיוסדה ב-2002 ע"י המעצבים הגרפיים <a href="http://www.michalsahar.com/" target="_blank">מיכל סהר</a> ו<a href="http://www.hatayas.co.il/" target="_blank">דני מירב (הטייס)</a>. במהלך שנים אלו עיצבנו כשלושים גופנים מוכָרים ומוערכים בשדה החזותי בארץ. שנינו עוסקים בהוראת עיצוב טיפוגרפי ועיצוב גופנים באקדמיה בצלאל ובמכללת שנקר לעיצוב.</p>
|
|
265
|
+
|
|
266
|
+
<p>אחד הפרויקטים החשובים ב"גילדה": "הגילדה קלאסיק" – פרויקט בו בחרנו לחדש מספר גופנים עבריים קלאסיים על מנת 'להחיות' את השימוש בהם, ולהתאים אותם לרמת הדיגיטציה הנדרשת כיום לדפוס. (יש לציין שחלק מהגופנים הנ"ל סבלו מגרסאות דיגיטליות עילגות). <a href="http://www.hagilda.com/" target="_blank">www.hagilda.com</a></p>
|
|
267
|
+
|
|
268
|
+
<p><a href="http://mushon.com">מושון זר־אביב</a> גם הוא מעצב גרפי ושותף מיסד ב<a href="http://shual.com">שועל, סטודיו לעיצוב</a> בעל דגש טכנולוגי ועיסוק מיוחד בקוד פתוח. מושון הרצה במסגרת התואר השני בתקשורת של אוניברסיטת ניו יורק ובמסגרת המחלקה לעיצוב גרפי באוניברסיטת Parsons. החל מ2010 מלמד מושון עיצוב בקוד פתוח במחלקה לתקשורת חזותית בבצלאל. מושון הוא גם היוזם (יחד עם נעים קאמל ואמיר דותן) של העצומה 'The Right To Flash' אשר ב-2003 קראה לחברת מקרומדיה לתמוך בשפות הנכתבות מימין לשמאל (כגון עברית, ערבית, פרסית, אורדו…) בתוכנת Flash אשר בזמנו הזניחה את נושא הלוקליזציה למזרח התיכון. העצומה שזכתה להד ותמיכה רחבה במזה"ת ובעולם, גם זכתה לביקורת צודקת מצד קהילת הקוד הפתוח אשר ביקרה את תלותה של קהילת מפתחי הפלאש בסביבת פיתוח סגורה אשר תלויה לחלוטין בשיקוליה התאגידיים של מקרומדיה.</p>
|
|
269
|
+
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="grid4 sidebar">
|
|
273
|
+
|
|
274
|
+
<div class="box reverse">
|
|
275
|
+
<p class="last">מפעל החייאת השפה העברית הוא מהמשימות הציוניות הראויות ביותר, שותפים בו בלשנים, סופרים, משוררים וגם מעצבי אותיות. לפני קום המדינה ובשנותיה הראשונות פעלו מספר מעצבים כדי לשמר את האות העברית ובו זמנית לעדכן אותה אל הזמנים המשתנים (בעיקר בהשפעת טיפוגרפיה מודרניסטית).</p>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<p class="caption">שיפור המצב הקיים</p>
|
|
279
|
+
|
|
280
|
+
<h3>יעדי היוזמה</h3>
|
|
281
|
+
|
|
282
|
+
<ol>
|
|
283
|
+
<li>הבטחת המשכיות ההבעה והקריאות בעברית על גבי מסך מחשב בכלל וברשת האינטרנט בפרט.</li>
|
|
284
|
+
<li>יצירת גופן עברי חופשי חדש אשר יכפיל פי שתיים (!) את ההיצע לעיצוב טיפוגרפי עברי למסך.</li>
|
|
285
|
+
<li>תיעוד עברי לתהליך ולדגשים ליצירת גופנים למסך כולל התייחסות לתהליך ה"hinting" המורכב.</li>
|
|
286
|
+
<li>הרחבת ההתמחות בעיצוב טיפוגרפיית מסך בקרב הקהילה האקדמית (בבצלאל ובשנקר).</li>
|
|
287
|
+
<li>יצירת תשתית רחבה (גם מעבר לגבולות האקדמיה) להמשך פיתוח גופני מסך פתוחים בעברית.</li>
|
|
288
|
+
</ol>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
<div class="section psample psample_row1" id="">
|
|
293
|
+
|
|
294
|
+
<div class="grid2 firstcol">
|
|
295
|
+
<p class="size10"><span>10.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
296
|
+
|
|
297
|
+
</div>
|
|
298
|
+
<div class="grid3">
|
|
299
|
+
<p class="size11"><span>11.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
300
|
+
|
|
301
|
+
</div>
|
|
302
|
+
<div class="grid3">
|
|
303
|
+
<p class="size12"><span>12.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
304
|
+
|
|
305
|
+
</div>
|
|
306
|
+
<div class="grid4">
|
|
307
|
+
<p class="size13"><span>13.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
308
|
+
|
|
309
|
+
</div>
|
|
310
|
+
<div class="white_blend"></div>
|
|
311
|
+
|
|
312
|
+
</div>
|
|
313
|
+
<div class="section psample psample_row2" id="">
|
|
314
|
+
<div class="grid3 firstcol">
|
|
315
|
+
<p class="size14"><span>14.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
316
|
+
|
|
317
|
+
</div>
|
|
318
|
+
<div class="grid4">
|
|
319
|
+
<p class="size16"><span>16.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
320
|
+
|
|
321
|
+
</div>
|
|
322
|
+
<div class="grid5">
|
|
323
|
+
<p class="size18"><span>18.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
324
|
+
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<div class="white_blend"></div>
|
|
328
|
+
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
<div class="section psample psample_row3" id="">
|
|
332
|
+
<div class="grid5 firstcol">
|
|
333
|
+
<p class="size20"><span>20.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="grid7">
|
|
336
|
+
<p class="size24"><span>24.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div class="white_blend"></div>
|
|
340
|
+
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<div class="section psample psample_row4" id="">
|
|
344
|
+
<div class="grid12 firstcol">
|
|
345
|
+
<p class="size30"><span>30.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="white_blend"></div>
|
|
348
|
+
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
<div class="section psample psample_row1 fullreverse">
|
|
354
|
+
<div class="grid2 firstcol">
|
|
355
|
+
<p class="size10"><span>10.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
356
|
+
|
|
357
|
+
</div>
|
|
358
|
+
<div class="grid3">
|
|
359
|
+
<p class="size11"><span>11.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
360
|
+
|
|
361
|
+
</div>
|
|
362
|
+
<div class="grid3">
|
|
363
|
+
<p class="size12"><span>12.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
364
|
+
|
|
365
|
+
</div>
|
|
366
|
+
<div class="grid4">
|
|
367
|
+
<p class="size13"><span>13.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
368
|
+
|
|
369
|
+
</div>
|
|
370
|
+
<div class="black_blend"></div>
|
|
371
|
+
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<div class="section psample psample_row2 fullreverse">
|
|
375
|
+
<div class="grid3 firstcol">
|
|
376
|
+
<p class="size14"><span>14.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
377
|
+
|
|
378
|
+
</div>
|
|
379
|
+
<div class="grid4">
|
|
380
|
+
<p class="size16"><span>16.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
381
|
+
|
|
382
|
+
</div>
|
|
383
|
+
<div class="grid5">
|
|
384
|
+
<p class="size18"><span>18.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
385
|
+
|
|
386
|
+
</div>
|
|
387
|
+
<div class="black_blend"></div>
|
|
388
|
+
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<div class="section psample fullreverse psample_row3" id="">
|
|
392
|
+
<div class="grid5 firstcol">
|
|
393
|
+
<p class="size20"><span>20.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
394
|
+
</div>
|
|
395
|
+
<div class="grid7">
|
|
396
|
+
<p class="size24"><span>24.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
<div class="black_blend"></div>
|
|
400
|
+
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
|
404
|
+
<div class="grid12 firstcol">
|
|
405
|
+
<p class="size30"><span>30.</span>א בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ. ב וְהָאָרֶץ, הָיְתָה תֹהוּ וָבֹהוּ, וְחֹשֶׁךְ, עַל-פְּנֵי תְהוֹם; וְרוּחַ אֱלֹהִים, מְרַחֶפֶת עַל-פְּנֵי הַמָּיִם. ג וַיֹּאמֶר אֱלֹהִים, יְהִי אוֹר; וַיְהִי-אוֹר. ד וַיַּרְא אֱלֹהִים אֶת-הָאוֹר, כִּי-טוֹב; וַיַּבְדֵּל אֱלֹהִים, בֵּין הָאוֹר וּבֵין הַחֹשֶׁךְ. ה וַיִּקְרָא אֱלֹהִים לָאוֹר יוֹם, וְלַחֹשֶׁךְ קָרָא לָיְלָה; וַיְהִי-עֶרֶב וַיְהִי-בֹקֶר, יוֹם אֶחָד.</p>
|
|
406
|
+
</div>
|
|
407
|
+
<div class="black_blend"></div>
|
|
408
|
+
|
|
409
|
+
</div>
|
|
410
|
+
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
|
|
414
|
+
|
|
415
|
+
<div id="layout-e" class="layout" dir="ltr">
|
|
416
|
+
|
|
417
|
+
<div class="section">
|
|
418
|
+
|
|
419
|
+
<div class="grid12 firstcol">
|
|
420
|
+
<h1>Alef by Hagilda 2012</h1>
|
|
421
|
+
<h2>28.7.12 — Full character set, Latin and Hebrew with diacritic glyphs!</h2>
|
|
422
|
+
|
|
423
|
+
<p class="byline">By <a href="#link">Michal Sahar, Danny Meirav (Hagilda) and Mushon Zer-Aviv</a></p>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="section">
|
|
427
|
+
<div class="grid8 firstcol">
|
|
428
|
+
<p class="large">Alef - Design and documentation of an open-source typeface for screen in Hebrew and Latin.</p>
|
|
429
|
+
|
|
430
|
+
|
|
431
|
+
<h3>Sample text in French:</h3>
|
|
432
|
+
|
|
433
|
+
<p>L'ouragan Vince a été la 21e tempête tropicale, égalant le record de la saison cyclonique 1933 avec 21 cyclones, et le onzième ouragan de la saison cyclonique 2005 de l'océan Atlantique. Vince se développa à l'extrême est de l'Atlantique et resta dans cette zone un moment avant de prendre la direction de la péninsule Ibérique le 11 octobre, ce qui ne s'était jamais produit auparavant[réf. nécessaire]. Bien qu'étant une tempête relativement faible et de courte durée qui n'a créé aucun dommage, c'est l'ouragan le plus inhabituel à s'être jamais formé dans l'océan Atlantique.</p>
|
|
434
|
+
|
|
435
|
+
<p>L'ouragan Vince s'est formé le 9 octobre 2005 dans la partie est de l'océan Atlantique, au sud-sud-ouest des Açores, à partir de la dépression tropicale Twenty-Three. Le 10 octobre, peu après avoir atteint l'intensité d'ouragan, il est rétrogradé au rang de tempête tropicale. Le 11 octobre, il touche terre près de Huelva en Espagne et devient ainsi le premier cyclone tropical de l'histoire à toucher la péninsule Ibérique.</p>
|
|
436
|
+
|
|
437
|
+
<h3>Sample text in Polish:</h3>
|
|
438
|
+
|
|
439
|
+
<p>Dysk rozproszony – region Układu Słonecznego rozciągający się za orbitą Neptuna, sięgający ponad 100 j.a. od Słońca oraz ponad 40° powyżej i poniżej ekliptyki. W obszarze tym krąży wiele małych ciał po orbitach o dużej ekscentryczności i inklinacji. Są to jedne z najdalszych i najzimniejszych obiektów w Układzie Słonecznym[1]. Ich orbity przypuszczalnie są wynikiem grawitacyjnego „rozproszenia” wywołanego przez gazowe olbrzymy. Orbity te wciąż ulegają perturbacjom wywoływanym przez Neptuna.</p>
|
|
440
|
+
|
|
441
|
+
<p>Wewnętrzny obszar dysku rozproszonego pokrywa się z Pasem Kuipera[2] i w literaturze naukowej rozróżnienie pomiędzy obiektami dysku rozproszonego i Pasa Kuipera jest często niedokładne. Niektórzy astronomowie rozszerzają definicję Pasa Kuipera, tak żeby obejmowała również dysk rozproszony[3]. W tym artykule dysk rozproszony jest traktowany jako osobny region przestrzeni.</p>
|
|
442
|
+
</div>
|
|
443
|
+
|
|
444
|
+
<div class="grid4 sidebar">
|
|
445
|
+
|
|
446
|
+
<div class="box reverse">
|
|
447
|
+
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
|
448
|
+
</div>
|
|
449
|
+
|
|
450
|
+
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
|
451
|
+
|
|
452
|
+
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
|
457
|
+
|
|
458
|
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
|
459
|
+
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
<div id="glyphs" dir="ltr">
|
|
472
|
+
<div class="section">
|
|
473
|
+
<div class="grid12 firstcol">
|
|
474
|
+
|
|
475
|
+
<h1>Language Support</h1>
|
|
476
|
+
<p>The subset of Alef Regular in this kit supports the following languages:<br />
|
|
477
|
+
|
|
478
|
+
English </p>
|
|
479
|
+
<h1>Glyph Chart</h1>
|
|
480
|
+
<p>The subset of Alef Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
|
481
|
+
<div id="glyph_chart">
|
|
482
|
+
|
|
483
|
+
<div><p>&#13;</p> </div>
|
|
484
|
+
<div><p>&#32;</p> </div>
|
|
485
|
+
<div><p>&#33;</p>!</div>
|
|
486
|
+
<div><p>&#34;</p>"</div>
|
|
487
|
+
<div><p>&#35;</p>#</div>
|
|
488
|
+
<div><p>&#36;</p>$</div>
|
|
489
|
+
<div><p>&#37;</p>%</div>
|
|
490
|
+
<div><p>&#38;</p>&</div>
|
|
491
|
+
<div><p>&#39;</p>'</div>
|
|
492
|
+
<div><p>&#40;</p>(</div>
|
|
493
|
+
<div><p>&#41;</p>)</div>
|
|
494
|
+
<div><p>&#42;</p>*</div>
|
|
495
|
+
<div><p>&#43;</p>+</div>
|
|
496
|
+
<div><p>&#44;</p>,</div>
|
|
497
|
+
<div><p>&#45;</p>-</div>
|
|
498
|
+
<div><p>&#46;</p>.</div>
|
|
499
|
+
<div><p>&#47;</p>/</div>
|
|
500
|
+
<div><p>&#48;</p>0</div>
|
|
501
|
+
<div><p>&#49;</p>1</div>
|
|
502
|
+
<div><p>&#50;</p>2</div>
|
|
503
|
+
<div><p>&#51;</p>3</div>
|
|
504
|
+
<div><p>&#52;</p>4</div>
|
|
505
|
+
<div><p>&#53;</p>5</div>
|
|
506
|
+
<div><p>&#54;</p>6</div>
|
|
507
|
+
<div><p>&#55;</p>7</div>
|
|
508
|
+
<div><p>&#56;</p>8</div>
|
|
509
|
+
<div><p>&#57;</p>9</div>
|
|
510
|
+
<div><p>&#58;</p>:</div>
|
|
511
|
+
<div><p>&#59;</p>;</div>
|
|
512
|
+
<div><p>&#60;</p><</div>
|
|
513
|
+
<div><p>&#61;</p>=</div>
|
|
514
|
+
<div><p>&#62;</p>></div>
|
|
515
|
+
<div><p>&#63;</p>?</div>
|
|
516
|
+
<div><p>&#64;</p>@</div>
|
|
517
|
+
<div><p>&#65;</p>A</div>
|
|
518
|
+
<div><p>&#66;</p>B</div>
|
|
519
|
+
<div><p>&#67;</p>C</div>
|
|
520
|
+
<div><p>&#68;</p>D</div>
|
|
521
|
+
<div><p>&#69;</p>E</div>
|
|
522
|
+
<div><p>&#70;</p>F</div>
|
|
523
|
+
<div><p>&#71;</p>G</div>
|
|
524
|
+
<div><p>&#72;</p>H</div>
|
|
525
|
+
<div><p>&#73;</p>I</div>
|
|
526
|
+
<div><p>&#74;</p>J</div>
|
|
527
|
+
<div><p>&#75;</p>K</div>
|
|
528
|
+
<div><p>&#76;</p>L</div>
|
|
529
|
+
<div><p>&#77;</p>M</div>
|
|
530
|
+
<div><p>&#78;</p>N</div>
|
|
531
|
+
<div><p>&#79;</p>O</div>
|
|
532
|
+
<div><p>&#80;</p>P</div>
|
|
533
|
+
<div><p>&#81;</p>Q</div>
|
|
534
|
+
<div><p>&#82;</p>R</div>
|
|
535
|
+
<div><p>&#83;</p>S</div>
|
|
536
|
+
<div><p>&#84;</p>T</div>
|
|
537
|
+
<div><p>&#85;</p>U</div>
|
|
538
|
+
<div><p>&#86;</p>V</div>
|
|
539
|
+
<div><p>&#87;</p>W</div>
|
|
540
|
+
<div><p>&#88;</p>X</div>
|
|
541
|
+
<div><p>&#89;</p>Y</div>
|
|
542
|
+
<div><p>&#90;</p>Z</div>
|
|
543
|
+
<div><p>&#91;</p>[</div>
|
|
544
|
+
<div><p>&#92;</p>\</div>
|
|
545
|
+
<div><p>&#93;</p>]</div>
|
|
546
|
+
<div><p>&#94;</p>^</div>
|
|
547
|
+
<div><p>&#95;</p>_</div>
|
|
548
|
+
<div><p>&#96;</p>`</div>
|
|
549
|
+
<div><p>&#97;</p>a</div>
|
|
550
|
+
<div><p>&#98;</p>b</div>
|
|
551
|
+
<div><p>&#99;</p>c</div>
|
|
552
|
+
<div><p>&#100;</p>d</div>
|
|
553
|
+
<div><p>&#101;</p>e</div>
|
|
554
|
+
<div><p>&#102;</p>f</div>
|
|
555
|
+
<div><p>&#103;</p>g</div>
|
|
556
|
+
<div><p>&#104;</p>h</div>
|
|
557
|
+
<div><p>&#105;</p>i</div>
|
|
558
|
+
<div><p>&#106;</p>j</div>
|
|
559
|
+
<div><p>&#107;</p>k</div>
|
|
560
|
+
<div><p>&#108;</p>l</div>
|
|
561
|
+
<div><p>&#109;</p>m</div>
|
|
562
|
+
<div><p>&#110;</p>n</div>
|
|
563
|
+
<div><p>&#111;</p>o</div>
|
|
564
|
+
<div><p>&#112;</p>p</div>
|
|
565
|
+
<div><p>&#113;</p>q</div>
|
|
566
|
+
<div><p>&#114;</p>r</div>
|
|
567
|
+
<div><p>&#115;</p>s</div>
|
|
568
|
+
<div><p>&#116;</p>t</div>
|
|
569
|
+
<div><p>&#117;</p>u</div>
|
|
570
|
+
<div><p>&#118;</p>v</div>
|
|
571
|
+
<div><p>&#119;</p>w</div>
|
|
572
|
+
<div><p>&#120;</p>x</div>
|
|
573
|
+
<div><p>&#121;</p>y</div>
|
|
574
|
+
<div><p>&#122;</p>z</div>
|
|
575
|
+
<div><p>&#123;</p>{</div>
|
|
576
|
+
<div><p>&#124;</p>|</div>
|
|
577
|
+
<div><p>&#125;</p>}</div>
|
|
578
|
+
<div><p>&#126;</p>~</div>
|
|
579
|
+
<div><p>&#162;</p>¢</div>
|
|
580
|
+
<div><p>&#163;</p>£</div>
|
|
581
|
+
<div><p>&#165;</p>¥</div>
|
|
582
|
+
<div><p>&#168;</p>¨</div>
|
|
583
|
+
<div><p>&#169;</p>©</div>
|
|
584
|
+
<div><p>&#171;</p>«</div>
|
|
585
|
+
<div><p>&#174;</p>®</div>
|
|
586
|
+
<div><p>&#180;</p>´</div>
|
|
587
|
+
<div><p>&#184;</p>¸</div>
|
|
588
|
+
<div><p>&#187;</p>»</div>
|
|
589
|
+
<div><p>&#710;</p>ˆ</div>
|
|
590
|
+
<div><p>&#730;</p>˚</div>
|
|
591
|
+
<div><p>&#732;</p>˜</div>
|
|
592
|
+
<div><p>&#1425;</p>֑</div>
|
|
593
|
+
<div><p>&#1426;</p>֒</div>
|
|
594
|
+
<div><p>&#1427;</p>֓</div>
|
|
595
|
+
<div><p>&#1428;</p>֔</div>
|
|
596
|
+
<div><p>&#1429;</p>֕</div>
|
|
597
|
+
<div><p>&#1430;</p>֖</div>
|
|
598
|
+
<div><p>&#1431;</p>֗</div>
|
|
599
|
+
<div><p>&#1432;</p>֘</div>
|
|
600
|
+
<div><p>&#1433;</p>֙</div>
|
|
601
|
+
<div><p>&#1434;</p>֚</div>
|
|
602
|
+
<div><p>&#1435;</p>֛</div>
|
|
603
|
+
<div><p>&#1436;</p>֜</div>
|
|
604
|
+
<div><p>&#1437;</p>֝</div>
|
|
605
|
+
<div><p>&#1438;</p>֞</div>
|
|
606
|
+
<div><p>&#1439;</p>֟</div>
|
|
607
|
+
<div><p>&#1440;</p>֠</div>
|
|
608
|
+
<div><p>&#1441;</p>֡</div>
|
|
609
|
+
<div><p>&#1443;</p>֣</div>
|
|
610
|
+
<div><p>&#1444;</p>֤</div>
|
|
611
|
+
<div><p>&#1445;</p>֥</div>
|
|
612
|
+
<div><p>&#1446;</p>֦</div>
|
|
613
|
+
<div><p>&#1447;</p>֧</div>
|
|
614
|
+
<div><p>&#1448;</p>֨</div>
|
|
615
|
+
<div><p>&#1449;</p>֩</div>
|
|
616
|
+
<div><p>&#1450;</p>֪</div>
|
|
617
|
+
<div><p>&#1451;</p>֫</div>
|
|
618
|
+
<div><p>&#1452;</p>֬</div>
|
|
619
|
+
<div><p>&#1453;</p>֭</div>
|
|
620
|
+
<div><p>&#1454;</p>֮</div>
|
|
621
|
+
<div><p>&#1455;</p>֯</div>
|
|
622
|
+
<div><p>&#1456;</p>ְ</div>
|
|
623
|
+
<div><p>&#1457;</p>ֱ</div>
|
|
624
|
+
<div><p>&#1458;</p>ֲ</div>
|
|
625
|
+
<div><p>&#1459;</p>ֳ</div>
|
|
626
|
+
<div><p>&#1460;</p>ִ</div>
|
|
627
|
+
<div><p>&#1461;</p>ֵ</div>
|
|
628
|
+
<div><p>&#1462;</p>ֶ</div>
|
|
629
|
+
<div><p>&#1463;</p>ַ</div>
|
|
630
|
+
<div><p>&#1464;</p>ָ</div>
|
|
631
|
+
<div><p>&#1465;</p>ֹ</div>
|
|
632
|
+
<div><p>&#1467;</p>ֻ</div>
|
|
633
|
+
<div><p>&#1468;</p>ּ</div>
|
|
634
|
+
<div><p>&#1469;</p>ֽ</div>
|
|
635
|
+
<div><p>&#1470;</p>־</div>
|
|
636
|
+
<div><p>&#1471;</p>ֿ</div>
|
|
637
|
+
<div><p>&#1472;</p>׀</div>
|
|
638
|
+
<div><p>&#1473;</p>ׁ</div>
|
|
639
|
+
<div><p>&#1474;</p>ׂ</div>
|
|
640
|
+
<div><p>&#1475;</p>׃</div>
|
|
641
|
+
<div><p>&#1476;</p>ׄ</div>
|
|
642
|
+
<div><p>&#1488;</p>א</div>
|
|
643
|
+
<div><p>&#1489;</p>ב</div>
|
|
644
|
+
<div><p>&#1490;</p>ג</div>
|
|
645
|
+
<div><p>&#1491;</p>ד</div>
|
|
646
|
+
<div><p>&#1492;</p>ה</div>
|
|
647
|
+
<div><p>&#1493;</p>ו</div>
|
|
648
|
+
<div><p>&#1494;</p>ז</div>
|
|
649
|
+
<div><p>&#1495;</p>ח</div>
|
|
650
|
+
<div><p>&#1496;</p>ט</div>
|
|
651
|
+
<div><p>&#1497;</p>י</div>
|
|
652
|
+
<div><p>&#1498;</p>ך</div>
|
|
653
|
+
<div><p>&#1499;</p>כ</div>
|
|
654
|
+
<div><p>&#1500;</p>ל</div>
|
|
655
|
+
<div><p>&#1501;</p>ם</div>
|
|
656
|
+
<div><p>&#1502;</p>מ</div>
|
|
657
|
+
<div><p>&#1503;</p>ן</div>
|
|
658
|
+
<div><p>&#1504;</p>נ</div>
|
|
659
|
+
<div><p>&#1505;</p>ס</div>
|
|
660
|
+
<div><p>&#1506;</p>ע</div>
|
|
661
|
+
<div><p>&#1507;</p>ף</div>
|
|
662
|
+
<div><p>&#1508;</p>פ</div>
|
|
663
|
+
<div><p>&#1509;</p>ץ</div>
|
|
664
|
+
<div><p>&#1510;</p>צ</div>
|
|
665
|
+
<div><p>&#1511;</p>ק</div>
|
|
666
|
+
<div><p>&#1512;</p>ר</div>
|
|
667
|
+
<div><p>&#1513;</p>ש</div>
|
|
668
|
+
<div><p>&#1514;</p>ת</div>
|
|
669
|
+
<div><p>&#1523;</p>׳</div>
|
|
670
|
+
<div><p>&#1524;</p>״</div>
|
|
671
|
+
<div><p>&#8211;</p>–</div>
|
|
672
|
+
<div><p>&#8212;</p>—</div>
|
|
673
|
+
<div><p>&#8216;</p>‘</div>
|
|
674
|
+
<div><p>&#8217;</p>’</div>
|
|
675
|
+
<div><p>&#8218;</p>‚</div>
|
|
676
|
+
<div><p>&#8220;</p>“</div>
|
|
677
|
+
<div><p>&#8221;</p>”</div>
|
|
678
|
+
<div><p>&#8222;</p>„</div>
|
|
679
|
+
<div><p>&#8230;</p>…</div>
|
|
680
|
+
<div><p>&#8249;</p>‹</div>
|
|
681
|
+
<div><p>&#8250;</p>›</div>
|
|
682
|
+
<div><p>&#8364;</p>€</div>
|
|
683
|
+
<div><p>&#8482;</p>™</div>
|
|
684
|
+
<div><p>&#57344;</p></div>
|
|
685
|
+
<div><p>&#64257;</p>fi</div>
|
|
686
|
+
<div><p>&#64258;</p>fl</div>
|
|
687
|
+
<div><p>&#64297;</p>﬩</div>
|
|
688
|
+
<div><p>&#64298;</p>שׁ</div>
|
|
689
|
+
<div><p>&#64299;</p>שׂ</div>
|
|
690
|
+
<div><p>&#64309;</p>וּ</div>
|
|
691
|
+
<div><p>&#64331;</p>וֹ</div>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
|
|
695
|
+
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
|
|
699
|
+
|
|
700
|
+
<div id="specs">
|
|
701
|
+
|
|
702
|
+
</div>
|
|
703
|
+
|
|
704
|
+
<div id="installing" dir="ltr">
|
|
705
|
+
<div class="section">
|
|
706
|
+
<div class="grid7 firstcol">
|
|
707
|
+
<h1>Installing Webfonts</h1>
|
|
708
|
+
|
|
709
|
+
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
|
710
|
+
|
|
711
|
+
<h2>1. Upload your webfonts</h2>
|
|
712
|
+
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
|
713
|
+
|
|
714
|
+
<h2>2. Include the webfont stylesheet</h2>
|
|
715
|
+
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
|
716
|
+
|
|
717
|
+
|
|
718
|
+
<code>
|
|
719
|
+
@font-face{
|
|
720
|
+
font-family: 'MyWebFont';
|
|
721
|
+
src: url('WebFont.eot');
|
|
722
|
+
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
|
723
|
+
url('WebFont.woff') format('woff'),
|
|
724
|
+
url('WebFont.ttf') format('truetype'),
|
|
725
|
+
url('WebFont.svg#webfont') format('svg');
|
|
726
|
+
}
|
|
727
|
+
</code>
|
|
728
|
+
|
|
729
|
+
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
|
730
|
+
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
|
731
|
+
|
|
732
|
+
<h2>3. Modify your own stylesheet</h2>
|
|
733
|
+
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
|
734
|
+
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
|
735
|
+
|
|
736
|
+
<h2>4. Test</h2>
|
|
737
|
+
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
|
738
|
+
</div>
|
|
739
|
+
|
|
740
|
+
<div class="grid5 sidebar">
|
|
741
|
+
<div class="box">
|
|
742
|
+
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
|
743
|
+
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
|
744
|
+
|
|
745
|
+
<h3>Fonts not showing in any browser</h3>
|
|
746
|
+
|
|
747
|
+
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
|
748
|
+
|
|
749
|
+
<h3>Fonts not loading in iPhone or iPad</h3>
|
|
750
|
+
|
|
751
|
+
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
|
752
|
+
|
|
753
|
+
<h3>Fonts not loading in Firefox</h3>
|
|
754
|
+
|
|
755
|
+
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
|
756
|
+
|
|
757
|
+
<h3>Fonts not loading in IE</h3>
|
|
758
|
+
|
|
759
|
+
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
|
760
|
+
|
|
761
|
+
<h3>Fonts not loading in IE9</h3>
|
|
762
|
+
|
|
763
|
+
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
|
764
|
+
</div>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
|
|
768
|
+
</div>
|
|
769
|
+
|
|
770
|
+
</div>
|
|
771
|
+
<div id="footer">
|
|
772
|
+
<p>©2010-2011 Font Squirrel. All rights reserved.</p>
|
|
773
|
+
</div>
|
|
774
|
+
</div>
|
|
775
|
+
</body>
|
|
776
|
+
</html>
|