html/sampler/sawarabi-sampler.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Traditional//EN">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   5 <title>さわらびフォントの試し書き</title>
   6 <script defer="defer" type="text/javascript" src="./sie.js"></script>
   7 <script type="text/javascript" src="./json2.js"></script>
   8 <script type="text/javascript" src="./sawarabi-sampler.js"></script>
   9 <link rel="stylesheet" href="./sawarabi-sampler.css" type="text/css"></link>
  10 </head>
  11 <body onload="init(6)">
  12 <div style="max-width: 600px; margin: auto">
  13 <div id="path">
  14 <a href="../index.html">トップページ</a> &gt; さわらびゴシック試し書きコーナー
  15 </div>
  16 <h1>さわらびゴシック試し書きコーナー</h1>
  17 <p>自由に<strong>さわらびゴシック</strong>の試し書きをしてみよう！</p>
  18 <div id="script-enabled">
  19 <div><img src="img/dolphin-help.png" alt="assistant" id="assistant"
  20      onmouseup="switch_help()"></div>
  21 <div id="help"></div>
  22 <div>
  23 <img src="img/balloon.png" alt="" id="assistant-balloon">
  24 <img src="img/next-0.png" id="next" alt="次へ"
  25      onmouseup="change_message_next()">
  26 </div>
  27 <div id="canvas"><br></div>
  28 <div><br></div>
  29 <div>
  30 <tt>テキスト：</tt><input id="input" type="text" maxlength="40"><br>
  31 <tt>サ イ ズ：</tt><select id="size">
  32 <option value="min">小</option>
  33 <option value="mid" selected>中</option>
  34 <option value="max">大</option>
  35 </select><br>
  36 <div id="for_sie"></div>
  37 <input type="button" value="更新" id="update" onclick="draw_svg()">
  38 <input type="button" value="クリア" onclick="clear_field()">
  39 </div>
  40 </div>
  41 <noscript>
  42 <p>
  43 ……というコーナーなのですが、これは JavaScript が有効になっていないと動きません。
  44 </p>
  45 <p>
  46 <a href="../index.html">トップページに戻る</a>
  47 </p>
  48 </noscript>
  49 <div><br></div>
  50 <div id="hidden" style="display: none">
  51 <div id="help-msg-1">
  52 上のテキスト欄に文字を入力して「更新」ボタンを押すと、
  53 入力した文字が<strong>さわらびゴシック</strong>で表示されます。
  54 </div>
  55 <div id="help-msg-2">
  56 「サイズ」コンボボックスの値を変更すると、文字のサイズを変えることもできます。
  57 </div>
  58 <div id="help-msg-3">
  59 なお、<strong>さわらびゴシック</strong>にまだ収録されていない文字は、
  60 <a href="http://mplus-fonts.sourceforge.jp" target="_blank">M+ FONTS</a> でグレー表示されるようになっています。
  61 M+ FONTS にもない文字は「?」と表示されます。
  62 </div>
  63 <div id="help-msg-4">
  64 また、文字の表示はフォントそのものを利用して行っているわけではありません。
  65 各文字を <a href="http://ja.wikipedia.org/wiki/SVG" target="_blank">SVG</a> に変換して表示しています。
  66 文字間隔や細かい見え方など、実際と少し違っていることがあります。
  67 </div>
  68 <div id="help-msg-5">
  69 Internet Explorer はまだ未対応の扱いですが、一応動作不能ということもないかもしれません。
  70 とはいえ、表示結果は仮のものだと思ってください。
  71 <a href="http://mozilla.jp/firefox/" target="_blank">Mozilla Firefox</a> や
  72 <a href="http://www.google.com/chrome/?hl=ja" target="_blank">Google
  73 Chrome</a> などでご覧いただいたほうが綺麗です。
  74 </div>
  75 <div id="help-msg-6">
  76 ちなみに、このアプリケーションで利用させていただいている
  77 <a href="http://mplus-fonts.sourceforge.jp" target="_blank">M+ FONTS</a>
  78 は、mplus-TESTFLIGHT-025 の mplus-1p-medium.ttf です。
  79 それを <a href="http://ja.wikipedia.org/wiki/SVG" target="_blank">SVG</a>
  80 に変換したものを表示しています。
  81 </div>
  82 </div>
  83 <p>
  84 <a href="http://sourceforge.jp/"><img src="http://sourceforge.jp/sflogo.php?group_id=3896&type=1" width="96" height="31" border="0" alt="SourceForge.JP"></a>
  85 </p>
  86 </div>
  87 </body>
  88 </html>