LANG SELRCT

コードを書く場所についてはこちら

2017年12月5日火曜日

Google Fonts APIを使ってみる


Google Fonts APIを利用すると
上の画像のような形で文字を表示することができます


Webアプリケーションをつくって実行する手順はこちら



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
意訳.gs
この処理は以下を実行する
指定したファイルのHTMLを表示する




index.html
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <style>
    .ta {
      font-family: 'Tangerine', serif;
      font-size: 48px;
      text-shadow: 4px 4px 4px aqua;
      color: blue;
    }
  </style>
</head>
<body>
  <textarea class="ta">Hello</textarea>
</body>
</html>
意訳
ここからhtml
ここからhead
linkタグで指定したフォントを読み込む(例ではTangerine)
ここからstyle
taクラスの設定
font-familyを設定
font-sizeを設定
text-shadowを設定
colorを設定

ここまでstyle
ここまでhead
ここからbody
textareaのclassにtaを指定し、Helloを入れる
ここまでbody
ここまでHTML



試してみる




例ではテキストエリアを作ったので
何か入力すると同じフォントで表示されます



参考

Get Started with the Google Fonts API
https://developers.google.com/fonts/docs/getting_started

Fonts List
https://fonts.google.com/

Google Fonts
https://developers.google.com/fonts/

Google Fonts + 日本語 早期アクセス
https://googlefonts.github.io/japanese/