- 追加された行はこの色です。
- 削除された行はこの色です。
- WebFonts へ行く。
#author("2021-12-14T19:36:50+09:00;2021-06-16T17:38:34+09:00","default:inoue.ko","inoue.ko")
*WEB FONTS
~
Webフォントとは、CSS3で新たに導入された仕様で、ページ中のテキストの表示をサーバーに置いたフォントをダウンロードして利用できるようにしたものです。かつては、ブラウザに表示される文字は、閲覧者のフォント環境に依存せざるをえない状況でしたが、Webフォントの技術によって、すべての閲覧者に対して同一イメージでの閲覧を実現できるようになりました。ただし、日本語サイトの場合、フォントデータがそれなりに大きいので、初回アクセス時には、フォントのダウンロードの時間分だけ表示が遅れることになります。
近年、Webページに使用されている文字だけをダウンロードさせる「サブセット化」と、CDN（コンテンツ配信ネットワーク）の利用によって、従来の数倍の速さが実現されるようになっています（ [[モリサワ TypeSquare>http://www.morisawa.co.jp/font/products/typesquare/]]）。
~
***CONTENTS
#contents2_1
~
**Google Fonts
Google が提供するWebフォントが充実しています。導入の仕方も簡単ですので、まずはこちらをお試しください。
#image(GoogleFonts.png,right,around,20%)
-以下のページにアクセス
https://fonts.google.com/
-使いたいフォントを選択 ＞ [ ＋ ]をクリック
-画面の最下部に ''1 Family selected'' と書かれたタブが表示されます。
-他にも使いたいフォントがあれば、続けて [ ＋ ]をクリック
-画面下のタブの表示が 2 Family、3 Family と増えていきます。
-タブの右側をクリックすると、右上のような画面が表示されます。
必要な埋め込みコードが表示されるので、
--以下の表記部分を、HTMLの<head>部分にコピー&ペースト
<link href="https://fonts.googleapis.com/css?family=xxxxxxxx" rel="stylesheet">
--以下のような記述を、CSSの当該要素に書く
font-family: xxxxxxxx;
-以上の操作で、Google Fontsを用いた表示が実現します。
~
~
**Google 日本語フォント
Google と Adobe が共同開発したNotoフォントや、M+フォントが、無料で提供されています。使い方は上記の Googleフォントと同様です。
-フォントの登録は、以下いずれかの方法で行います。
--方法１：スタイルシートの先頭で定義ファイルをインポートする
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
--方法２：HTMLのヘッダーで読み込む
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
-フォントの利用は、例えば、以下のように記載します。
body {
font-family: 'Noto Sans Japanese', serif;
font-weight:400;
}
-ウエイトは、以下の７種類から選べます。
Thin 100, Light 300, DemiLight 350, Regular 400,
Medium 500, Bold 700, Black 900
-参考：[[Google Noto Sans Japanese>https://www.google.com/get/noto/#sans-jpan]]
-参考：Google Fonts + 日本語早期アクセス
https://googlefonts.github.io/japanese/
&aname(FontAwesome);
~
~
**Font Awesome
Font Awesomeとは、さまざまなアイコンを Webフォント として利用できるようにしたもので、アイコンがフォント扱いなので、サイズや色を CSS で変更することができます。CDNを使う、あるいはフォントセットをダウンロードして自身のサーバーに置く、いずれも可能です。
-公式サイト：https://fontawesome.com
~
***CDNを使う
-CSSの場合
<link href="https://use.fontawesome.com/releases/ [バージョン] /css/all.css" rel="stylesheet" >
[バージョン] の部分は v5.9.0 など
-JavaScriptの場合
<script defer src="https://use.fontawesome.com/releases/ [バージョン] /js/all.js"></script>
[バージョン] の部分は v5.9.0 など
-Version 5 からは 登録ユーザとしてログインすると、以下のページにアクセスすることで、<head>に記載するコードが取得できます。
https://fontawesome.com/kits
以下のような形式の一行を<head>に追加するかたちになります。
<script src="https://kit.fontawesome.com/xxxxxxxxxxx.js"></script>
~
***Downloadして使う
-以下のサイトからファイルセットをダウンロードします。
https://fontawesome.com/download
-fontsフォルダの中の各データ ＞ 作成中のサイトの fonts フォルダへ
-cssフォルダ内の font-awesome.min.css ＞ 同じく css フォルダへ
※cssフォルダとfontsフォルダは同じ階層に存在する前提です。
-HTMLのヘッダーで、font-awesome.min.css をリンクしてください。
<link rel="stylesheet" href="css/font-awesome.min.css">
~
***利用できるアイコン
Ver.5 にアップグレードされ、その仕様、使い方も変更されています。
-最新の Ver. 5系のアイコンは以下でアイコンのクラス名を確認できます。
https://fontawesome.com/icons?d=gallery&m=free
-すでに Ver.4系 を利用中の場合は、以下で確認できます。
https://fontawesome.com/v4.7.0/icons/
~
***HTML内での記述
-以下のように<i>タグ、あるいは<span>タグにクラスを指定すると、アイコンが表示されます。
<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>
-スタイルは、以下のように定義して利用するとよいでしょう。
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
-詳細な記述方法は以下に説明があります。
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
~
#hr
&color(red){以下は、Ver.4.7 のルールです。};
-以下のように<i>タグ、あるいは<span>タグにクラスを指定すると、アイコンが表示されます。
<i class="fa fa-camera-retro"></i>
-サイズを変更する場合：以下のように class の情報を追加します。
<i class="fas fa-camera-retro fa-lg"></i> ← 1.33倍
<i class="fas fa-camera-retro fa-2x"></i> ← 2倍（以下同様）
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-4x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
-色を変更する場合：以下のように class の情報を追加します。
<i class="fas fa-camera-retro my-gray"></i>
<i class="fas fa-camera-retro my-red"></i>
<i class="fas fa-camera-retro my-blue"></i>
-前後に余白が欲しい場合：class に fa-fw を追加します。
<i class="fas fa-camera-retro fa-fw"></i>
-回転アニメーション：class に fa-spin を追加します。
<i class="far fa-camera-retro fa-spin"></i>
-傾ける：class に fa-rotate- を追加します。
<i class="fas fa-camera-retro fa-rotate-90"></i>
-アイコンを線で囲む：class に fa-border を追加します。
<i class="fas fa-camera-retro fa-border"></i>
-アイコンを重ねる：以下のように fa-stack クラスを適用したspan で囲む
<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
~
~
**一般的なWebフォントの使い方
自分が所有するフォントデータを使用する場合は、サーバーにフォントデータをアップして、それを閲覧者にDLしてもらいます。以下、手順です。
~
***サーバーにフォントデータを置く
Webに最適化された「Webフォント」のデータをサーバーに置きます。ここでは、例えば、ドキュメントルート(index.htmlを置く場所)に「webFont」というディレクトリをつくって、そこに「freeFont.otf」というフォントファイルを置いた・・という前提で話を進めます。
~
***フォントファミリーの定義
CSSファイルに、以下のように記述すると、その freeFont.otf は「myFont」という名称（フォント名は任意に設定可）で利用できるようになります。
@font-face {
font-family: myFont;
src: url('./webFont/freeFont.otf') format("opentype");
}
~
***フォントの利用
フォントを実際に利用するには、font-family属性に、myFont を定義します。
h1 {
font-family: myFont;
}
~
~
**Webフォントの入手
***オープンソースあるいはフリーのフォント
-Google FONTS http://www.google.com/fonts/
-Font Awesome http://fontawesome.io/
-[[M+ OUTLINE FONTS>Google:M+ OUTLINE FONTS]]
-[[M+とIPAの合成フォント>http://mix-mplus-ipa.sourceforge.jp/]]
-[[IPAex / IPA フォント>http://ipafont.ipa.go.jp/]]
-[[FLOP DESIGN>http://www.flopdesign.com/index.html]]
~
***有償のフォント
-[[TypeSquare モリサワ>http://www.morisawa.co.jp/font/products/typesquare/]]
~
~
