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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
|
<HTML>
<HEAD>
<!-- Created with AOLpress/2.0 -->
<!-- AP: Created on: 6-Dec-2000 -->
<!-- AP: Last modified: 3-Jul-2006 -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<!--
<TITLE>Steps to creating a font...</TITLE> -->
<TITLE>フォント作成のための手順…</TITLE>
<LINK REL="icon" href="../../_static/fftype16.png">
<LINK REL="stylesheet" TYPE="text/css" HREF="FontForge.css">
</HEAD>
<BODY>
<DIV id="in">
<H1 ALIGN=Center>
<!--Tutorial<BR>-->
チュートリアル<BR>
<A HREF="editexample.html"><IMG src="../../_images/Nisshoki-Japan.png" WIDTH="39"
HEIGHT="26"></A>
<A HREF="../de/editexample.html"><IMG src="../../_images/GermanFlag.png" WIDTH="39"
HEIGHT="26"></A>
</H1>
<P>
<!--
I shall not presume to teach aesthetics, I concentrate solely on the mechanics
here.<BR>-->
私に美学を教える能力があるとは思いません。ここでは機能のみに集中します。<BR>
<!--
<SMALL>(this tutorial is also available as a
<A HREF="../fontforge-tutorial.pdf">pdf version</A>)</SMALL> -->
<SMALL>(このチュートリアル (英語版) は <A HREF="http://fontforge.sourceforge.net/fontforge-tutorial.pdf">PDF 版</A>でも入手可能です)</SMALL>
<UL>
<LI>
<!-- <A HREF="editexample.html#FontCreate">Font Creation</A>-->
<A HREF="editexample.html#FontCreate">フォントの作成</A>
<LI>
<!-- <A HREF="editexample.html#CharCreate">Creating a glyph (tracing outlines)</A>-->
<A HREF="editexample.html#CharCreate">グリフの作成 (アウトラインのトレース) 法</A>
<LI>
<!-- <A HREF="editexample2.html#Navigating">Navigating to other glyphs</A>-->
<A HREF="editexample2.html#Navigating">他のグリフの呼び出し方</A>
<LI>
<!-- <A HREF="editexample2.html#Creating-o">On to the next glyph (consistent
directions)</A>-->
<A HREF="editexample2.html#Creating-o">次のグリフに関して (矛盾のないパスの向き)</A>
<LI>
<!-- <A HREF="editexample3.html#consistent-stems">Consistent serifs and stem
widths</A>-->
<A HREF="editexample3.html#consistent-stems">統一のとれたセリフとステムの太さ</A>
<LI>
<!-- <A HREF="editexample4.html#accents">Building accented glyphs</A>-->
<A HREF="editexample4.html#accents">アクセントつきグリフの組み立て方</A>
<LI>
<!-- <A HREF="editexample4.html#ligature">Building a ligature</A>-->
<A HREF="editexample4.html#ligature">合字の組み立て方</A>
<LI>
<!-- <A HREF="editexample5.html#metrics">Examining metrics</A>-->
<A HREF="editexample5.html#metrics">メトリックの確認法</A>
<UL>
<LI>
<!-- <A HREF="editexample5.html#baseline">Setting the baseline to baseline spacing
of a font</A> -->
<A HREF="editexample5.html#baseline">フォントのベースラインとベースラインの間隔の設定方法</A>
</UL>
<LI>
<!-- <A HREF="editexample5.html#Kerning">Kerning</A>-->
<A HREF="editexample5.html#Kerning">カーニング</A>
<LI>
<!-- <A HREF="editexample6.html#Variants">Glyph variants</A>-->
<A HREF="editexample6.html#Variants">異体関係にあるグリフ</A>
<LI>
<!-- <A HREF="editexample6.html#Marks">Anchoring marks</A>-->
<A HREF="editexample6.html#Marks">アンカーマーク</A>
<LI>
<!-- <A HREF="editexample6-5.html#Conditional">Conditional features</A>-->
<A HREF="editexample6-5.html#Conditional">条件つき機能</A>
<LI>
<!-- <A HREF="editexample7.html#checking">Checking your font</A>-->
<A HREF="editexample7.html#checking">フォントのチェック法</A>
<LI>
<!-- <A HREF="editexample7.html#Bitmaps">Bitmaps</A>-->
<A HREF="editexample7.html#Bitmaps">ビットマップ</A>
<LI>
<!-- <A HREF="editexample7.html#generating">Generating it</A>-->
<A HREF="editexample7.html#generating">フォントの出力方法</A>
<LI>
<!-- <A HREF="editexample7.html#Families">Font Families</A>-->
<A HREF="editexample7.html#Families">フォントファミリー</A>
<LI>
<!-- <A HREF="editexample7.html#summary">Final Summary</A>-->
<A HREF="editexample7.html#summary">最後のまとめ</A>
<LI>
<!-- <A HREF="scripting-tutorial.html">Scripting Tutorial</A> -->
<A HREF="scripting-tutorial.html">スクリプト処理のチュートリアル</A>
<LI>
<!-- <A HREF="scriptnotes.html#Special">Notes on various scripts</A>-->
<A HREF="scriptnotes.html#Special">各種の用字系における注意点</A>
</UL>
<BLOCKQUOTE ID="lit">
<!--<B><SMALL>NOBLEMAN:</SMALL></B><SMALL> </SMALL>Now this is what I call
workmanship. There is nothing on earth more exquisite than a bonny book,
with well-placed columns of rich black writing in beautiful borders, and
illuminated pictures cunningly inset. But nowadays, instead of looking at
books, people read them. A book might as well be one of those orders for
bacon and bran that you are scribbling. -->
<p><B><SMALL>貴族:</SMALL></B><SMALL> </SMALL>これだよ、職人わざというのは。美しい書物以上に精緻をきわめたものはまたとあるまい。美しい縁どりに収められた漆黒の文字の見事な配列、巧みに挿入された色刷りの絵。ところがこの頃の人間は、書物を眺めようとせず、読んでばかりいる。これでは書物も、いま君が書きなぐっているベーコンや魚の注文伝票と、なんの変わりもありはしない。
<P ALIGN=Right>
<!-- - - Saint Joan, Scene IV<BR>
George Bernard Shaw, 1924 -->
—『聖女ジョウン』第四場<BR>
ジョージ・バーナード・ショー, 1924 年<BR>
(中川龍一・小田島雄志訳)
</BLOCKQUOTE>
<H2>
<!--<A NAME="FontCreate">Font creation</A>-->
<A NAME="FontCreate">フォントの作成</A>
</H2>
<P>
<!--
First create a new font with the <CODE>New</CODE> command in the
<CODE>File</CODE> menu (or by using the <KBD>-new</KBD> argument at startup). -->
まず、フォントを <CODE>ファイル(<U>F</U>)</CODE> メニューの <CODE>新規(<U>N</U>)</CODE> コマンドで (または、起動時に引数 <KBD>-new</KBD> を指定して) 作成します。
<P>
<IMG src="../../_images/newfont.png" WIDTH="419" HEIGHT="189">
<P>
<!--
Give the font a name with the <CODE><A HREF="fontinfo.html">Font
Info</A></CODE> command from the <CODE>Element</CODE> menu. You use this
same command to set the copyright message and change the ascent and descent
(the sum of these two determines the size of the em square for the font,
and by convention is 1000 for postscript fonts, a power of two (often 2048
or 4096) for truetype fonts and 15,000 for Ikarus fonts). <SMALL>(Also if
you are planning on making a truetype font you might want to check the Quadratic
Splines checkbox to use the native truetype format. Editing is a little more
difficult in this mode though)</SMALL> -->
フォントには <CODE>エレメント(<U>L</U>)</CODE> メニューの <CODE><A HREF="fontinfo.html">フォント情報(<U>F</U>)...</A></CODE> コマンドで名前をつけてください。このコマンドは他にも、著作権表示を設定したり高さ (ascent)・深さ (descent) を設定するのに使えます。高さと深さ、2 つの値の合計はフォントの全角正方形 (em square) を決定します。一般には PostScript フォントでは 1000, TrueType フォントでは 2 の冪乗 (多くは 2048 か 4096), Ikarus フォントでは 15000 です。<SMALL>(もし TrueType を作る予定ならば、<CODE>2 次スプライン(<U>Q</U>)</CODE> チェックボックスをオンにして、TrueType フォーマットそのもので編集した方がいいかもしれません。ただし、このモードでは編集が少し難しくなります)</SMALL>
<P>
<IMG SRC="fontinfo.png" WIDTH="325" HEIGHT="454">
<P>
<!--
You may also wish to use Encoding->Reencode to change what characters
are available in your font. FontForge generally creates new fonts with an
ISO-8859-1, which contains (most of) the characters needed for Western Europe
(the latin letters, some accented letters, digits, and symbols). -->
フォント内でどの文字が利用できるかを変更したい場合は、<CODE>エンコーディング(<U>N</U>)</CODE>→<CODE>エンコーディング変換(<U>R</U>)</CODE> を使用することができます。特に設定していなければ、FontForge は新しいフォントを ISO-8859-1 で作成します。このエンコーディングには、西ヨーロッパで必要とされる (ほとんどの) 文字 (ラテン文字、いくつかのアクセントつき文字、数字および記号) が含まれています。
<H2>
<!--<A NAME="CharCreate">Creating a glyph</A>-->
<A NAME="CharCreate">グリフの作成法</A>
</H2>
<P>
<!--
Once you have done that you are ready to start editing characters. Double
click on the entry for "C" in the font view above. You should now have an
empty Outline Character window: -->
それが終わったら、文字の編集を始める用意ができています。上のフォントビューの“C”の項目をダブルクリックして下さい。空の文字アウトラインウィンドウが表示されます。
<P>
<IMG src="../../_images/C1.png" WIDTH="272" HEIGHT="283">
<P>
<!--
The outline glyph window contains two palettes snuggled up on the left side
of the window. The top palette contains a set of editing tools, and the bottom
palette controls which layers of the window are visible or editable.
-->
このアウトライングリフウィンドウの左端には、2 個のパレットが埋め込まれています。上のパレットは編集ツールの一覧を含み、下のパレットはウィンドウのどのレイヤが見え、どれが編集可能かを制御しています。
<P>
<!--
The foreground layer contains the outline that will become part of the font.
The background layer can contain images or line drawings that help you draw
this particular glyph. The guide layer contains lines that are useful on
a font-wide basis (such as the x-height). Currently all layers are empty.
-->
前面レイヤはフォントの部品となるアウトラインを含んでいます。背面レイヤはこの特定のグリフを描画する補助となる画像または描線を含んでいます。ガイドレイヤはフォントごとの基準として役立つ線 (x ハイトなど) を含んでいます。今のところ、全てのレイヤは空です。
<P>
<!--
This window also shows the glyph's internal coordinate system with the x
and y axes drawn in light grey. A line representing the glyph's advance width
is drawn in black at the right edge of the window. FontForge assigns an advance
width of one em (in PostScript that will usually be 1000 units) to the advance
width of a new glyph.
-->
このウィンドウには、グリフの内部座標系が x 軸と y 軸とともに薄い灰色で示されています。グリフの送り幅 (advance width) を示す線が黒で、ウィンドウの右端に描かれています。FontForge は、新規に作るグリフの送り幅としては、1 em の幅を割り当てます (PostScript では、これは通常 1000 ユニットです)。
<P>
<!--
Select the Import command from the File menu and import an image of the glyph
you are creating. It will be scaled so that it is as high as the em-square.
-->
<CODE>ファイル(<U>F</U>)</CODE> メニューから <CODE>取り込み(<U>I</U>)...</CODE> コマンドを選び、あなたが作成したグリフの画像を取り込んでください。グリフの高さが全角正方形 (em-square) に一致するように拡大/縮小されます。
<P>
<IMG src="../../_images/C2.png" WIDTH="272" HEIGHT="283">
<P>
<!--
Select the background layer as editable from the layers palette, move the
mouse pointer to one of the edges of the image, hold down the shift key,
depress and drag the corner until the image is a reasonable size, then move
the pointer onto the dark part of the image, depress the mouse and drag until
the image is properly positioned. -->
レイヤパレットで背面レイヤを選択して、編集可能な状態にします。マウスポインタを画像の端のどこかに合わせ、シフトキーを押しながら隅をクリックし、画像が適切なサイズになるまでドラッグします。そののち、ポインタを画像の暗色の部分に載せてマウスボタンを押下し、画像が適切な位置に来るまでドラッグします。
<P>
<IMG src="../../_images/C3.png" WIDTH="272" HEIGHT="283">
<P>
<!--
If you have downloaded the
<A HREF="http://sourceforge.net/projects/autotrace/">autotrace program</A>
you can invoke <CODE>Element->AutoTrace</CODE> to generate an outline
from the image. But if you have not you must add points yourself. Change
the active layer to be the foreground, and go to the tools palette and select
the round (or curve) point. Then move the pointer to the edge of the image
and add a point. I find that it is best to add points at places where the
curve is horizontal or vertical, at corners, or where the curve changes
inflection (A change of inflection occurs in a curve like "S" where the curve
changes from being open to the left to being open on the right. If you follow
these rules hinting will work better. -->
もしあなたが <A HREF="http://sourceforge.net/projects/autotrace/">autotrace</A> プログラムをダウンロード済みならば、<CODE>エレメント(<U>L</U>)</CODE>→<CODE>自動トレース(<U>R</U>)</CODE> で画像からアウトラインを生成することができます。しかし、インストールしていない場合は自分で点を追加しなければなりません。前面をアクティブレイヤに変更してから、ツールパレットで丸い (曲線上の) 点を選択します。その後でポインタを画像の縁に移し、点を追加します。私の経験では、曲線が水平または垂直になっている点や、角、そして変曲点 (曲率方向の変化は、S 字形の曲線が、右側に開いた部分から左側から開いた部分へ移るところで起こります) に点を追加するのが最良です。この方針に従えば、ヒント処理がより適切に働くようになるでしょう。
<P>
<IMG src="../../_images/C4.png" WIDTH="272" HEIGHT="283">
<P>
<!--
It is best to enter a curve in a clockwise fashion, so the next point should
be added up at the top of the image on the flat section. Because the shape
becomes flat here, a curve point is not appropriate, rather a tangent point
is (this looks like a little triangle on the tools palette). A tangent point
makes a nice transition from curves to straight lines because the curve leaves
the point with the same slope the line had when it entered. -->
曲線は時計回りに入力していくのが最善です。そうすれば、次の点は、画像の上端の平らな部分に追加されます。輪郭線がそこで直線にさしかかるので、曲線上の点は不適切で、(曲線と直線の) 接点 (ツールパレット上では小さな三角形のように見えます) のほうが適切です。接点は曲線から直線への美しい移り変わりを形づくります。これは、その点における曲線の傾きが、引き続く直線が入力された時の傾きと同じに保たれるからです。
<P>
<IMG src="../../_images/C5.png" WIDTH="272" HEIGHT="283">
<P>
<!--
At the moment this "curve" doesn't match the image at all, don't worry about
that we'll fix it later, and anyway it will change on its own as we continue.
Note that we now have a control point attached to the tangent point (the
little blue x). The next point needs to go where the image changes direction
abruptly. Neither a curve nor a tangent point is appropriate here, instead
we must use a corner point (one of the little squares on the tools palette).
-->
今のところこの「曲線」は画像と全く一致していません。後で修正しますし、作業を続けるに従っていずれにしろ変形するのでこれは気にせず続けてください。制御点が接点 (小さな青い×印) につながっていることに注意してください。画像で輪郭の方向が突然変化している箇所に次の点を置かなければなりません。曲線上の点も接点も不適切ですから、角の点 (ツールパレット上の小さな四角の一つ) を使用しなくてはなりません。
<P>
<IMG src="../../_images/C6.png" WIDTH="272" HEIGHT="283">
<P>
<!--
As you see the old curve now follows the image a bit more closely. We continue
adding points until we are ready to close the path. -->
図に見るように、先ほどの曲線はわずかながら前より密接に画像に沿っています。
パスが閉じる直前のところまで、点の追加を続けましょう。
<P>
<IMG src="../../_images/C7.png" WIDTH="272" HEIGHT="283">
<P>
<!--
Then we close the path just by adding a new point on top of the old start
point -->
その後、以前の開始点の上に重ねて新しく点を追加すれば、それでパスは閉じます。
<P>
<IMG src="../../_images/C8.png" WIDTH="272" HEIGHT="283">
<P>
<!--
Now we must make the curve track the image more closely, to do this we must
adjust the control points (the blue "x"es). To make all the control points
visible select the pointer tool and double-click on the curve and then move
the control points around until the curve looks right. -->
ここで、曲線が画像をより正確にたどるようにする必要がありますが、そのためには制御点 (青い×印) を調整する必要があります。
全ての制御点が見えるようにするため、ポインタツールを選んで曲線上でダブルクリックし、それから曲線が画像と同じ形になるように制御点を動かします。
<P>
<IMG src="../../_images/C9.png" WIDTH="266" HEIGHT="279">
<P>
<!--
Finally we set width. Again with the pointer tool, move the mouse to the
width line on the right edge of the screen, depress and drag the line back
to a reasonable location. -->
最後に幅を設定します。ポインタツールに戻り、マウスを画面の右端にある字幅線に合わせてクリックし、文字幅が適切な位置に来るまでドラッグして戻します。
<P>
<IMG src="../../_images/C10.png" WIDTH="266" HEIGHT="279">
<P>
<!--
And we are done with this glyph. -->
これでこのグリフについては完成です。
<P>
<!--
If you are mathematically inclined you may be interested in the coordinates
that fontforge shows in the upper left of the window. Generally you can draw
glyphs quite happily without bothering about these, but for those who are
interested here is some basic info: -->
もしあなたが数学に興味のある性格ならば、FontForge がウィンドウの左上に表示する座標値に興味を持たれたことでしょう。一般にはこれらの値を気にしなくても非常に快適にグリフを描画することができますが、興味をお持ちの方のために基本的な情報を提供しておきます:
<UL>
<LI>
<!-- Each glyph has its own coordinate system. -->
各グリフはそれ自身の座標系をもっています。
<LI>
<!-- The vertical origin is the font's baseline (the line on which most latin
letters rest) -->
垂直方向の原点はフォントのベースライン (ほとんどのラテン文字が載っかっている線) の上にあります。
<LI>
<!-- The horizontal origin is the place where drawing the glyph will commence.
In the example above what gets drawn initially is empty space, that is fairly
common, and that empty space (the distance from the origin to the left edge
of the glyph) is called the left side bearing. -->
水平方向の原点が、グリフの描画が開始される基準位置です。上の例では、最初に描画されるのは空っぽの空間ですが、これは非常によくあることで、この空っぽの空間 (原点からグリフの左端までの距離) を左サイドベアリングと呼びます。
<LI>
<!-- The units of the coordinate system are determined by the em-size of the font.
This is the sum of the font's ascent and descent. In the example above the
font's ascent is 800 and descent is 200, and the ascent line (the one just
above the top of the "C") is 800 units from the baseline, while the descent
line is 200 units below. -->
座標系の単位はフォントの em サイズにより決まります。これはフォントの高さと深さ の和です。上の例ではフォントの高さは 800 で、深さは 200 です。そして高さの基準線 (“C”の最上部のすぐ上にある線) はベースラインから 800 ユニット離れており、深さの基準線は 200 ユニット下にあります。
<LI>
<!-- So a position of 282,408 (as above) means that the cursor is 282 units right
of the horizontal origin and 408 units above the baseline (or halfway between
baseline and ascent). -->
ですから、(上の図の) <CODE>282,408</CODE> という位置は、カーソルが水平方向の原点から 282 ユニット右に、ベースラインから 408 ユニット上に (すなわち、上端と下端のほぼ中間に) ある ということを意味しています。
</UL>
<P ALIGN=Center>
— <A HREF="overview.html">前</A> — <A HREF="overview.html">目次</A> —
<A HREF="editexample2.html">次</A> —
</DIV>
</BODY></HTML>
|
