forked from danmarshall/google-font-to-svg-path
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·136 lines (105 loc) · 5.97 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>google-font-to-svg-path-japanese</title>
<meta name="description" content="google-font-to-svg-pathの日本語翻訳版(不完全)">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="https://maker.js.org/target/js/browser.maker.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bezier-js@2/bezier.js"></script>
<script src="opentype.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<script data-ad-client="ca-pub-9656548229423934" async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<h1>Google Font to Svg Path</h1>
<h>(不明)の部分は翻訳者が理解できなかったとこです。正しい翻訳・機能が分かる方はGitHubにコメントしてください</h>
<a href="https://github.com/fynk7777/Google-fonts-japanese" class="link-to-github" target="_blank">GitHubのリンク</a>
<a href="https://fonts.google.com/" class="link-to-Google-fonts" target="_blank">Google fontsのリンク</a>
<a href="https://danmarshall.github.io/google-font-to-svg-path/" class="originator" target="_blank">本家Google Font to Svg Path</a>
<hr>
<main>
<div class="content">
<div id="error-display"></div>
<div class="input-holder">
<label>Google font: <select id="font-select" class="input"></select></label>
</div>
<div class="input-holder">
<label>(optional) ファイルをアップロードする: <input id="font-upload" type="file" class="input" /></label>
<button id="font-upload-remove" class="input">削除</button>
</div>
<div class="input-holder">
<label>文字の太さ: <select id="font-variant" class="input"></select></label>
</div>
<div class="input-holder">
<label>テキスト: <input type="text" id="input-text" value="sample text" class="input-text input" /></label>
</div>
<div class="input-holder">
<label>大きさ: <input type="number" id="input-size" value="100" class="input-size input" /></label>
</div>
<div class="input-holder">
<label>(不明)union: <input type="checkbox" id="input-union" /></label>
</div>
<div class="input-holder">
<label>(不明)kerning: <input type="checkbox" id="input-kerning" checked /></label>
</div>
<div class="input-holder">
<label>塗りつぶす: <input type="checkbox" id="input-filled" checked /></label>
</div>
<div class="input-holder"><label>(不明)separate characters: <input type="checkbox" id="input-separate" /></label>
</div>
<div class="input-holder">
<label>ベジェ曲線(bezier accuracy) <span
title="0.5 = accurate to half a pixel 
.001 = accurate to 1/1000th of a pixel 
smaller numbers take longer to compute 
leave blank for auto">🛈</span>
: <input type="text" id="input-bezier-accuracy" placeholder="auto" class="input" /></label>
</div>
<div class="input-holder">
<label>(不明)Dxf Units: <select id="dxf-units" class="input"></select></label>
</div>
<div class="input-holder">
<label>塗りつぶしの色: <input type="text" id="input-fill" value="#000" class="input-fill input" data-coloris /></label>
</div>
<div class="input-holder">
<label>枠線の色: <input type="text" id="input-stroke" value="#000" class="input-stroke input" data-coloris /></label>
</div>
<div class="input-holder">
<label>枠線の大きさ: <input type="text" id="input-stroke-width" value="0.25mm" class="input-stroke-width input"/></label>
</div>
<div class="input-holder">
<label>(不明)Non-scaling stroke: <input type="checkbox" id="input-stroke-non-scaling" checked class="input-stroke-non-scaling input"/></label>
</div>
<div class="input-holder">
<label>fill-rule:
<select id="input-fill-rule" class="input">
<option value="evenodd">evenodd</option>
<option value="nonzero">nonzero</option>
</select>
</label>
</div>
<div id="svg-render"></div>
<div class="textarea-container">
<textarea id="output-svg" readonly></textarea>
<div class="buttons-container">
<button class="btn" id="copy-to-clipboard-btn">HTMLをコピー</button>
<a id="download-btn" class="btn">Svgでダウンロード</a>
<a id="create-link" class="btn">リンクを作成</a>
<a id="dxf-btn" class="btn">Dxfでダウンロード</a>
</div>
</div>
</div>
<div class="sidebar">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- vertical -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9656548229423934"
data-ad-slot="8489021387" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</main>
<input id="dummy" name="dummy" type="hidden">
</body>
</html>