WebFonts
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WEB FONTS
~
Webフォントとは、CSS3で新たに導入された仕様で、ページ中の...
近年、Webページに使用されている文字だけをダウンロードさせ...
~
***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=xxxx...
--以下のような記述を、CSSの当該要素に書く
font-family: xxxxxxxx;
-以上の操作で、Google Fontsを用いた表示が実現します。
~
~
**Google 日本語フォント
Google と Adobe が共同開発したNotoフォントや、M+フォント...
-フォントの登録は、以下いずれかの方法で行います。
--方法１：スタイルシートの先頭で定義ファイルをインポート...
@import url(http://fonts.googleapis.com/earlyaccess/noto...
--方法２：HTMLのヘッダーで読み込む
<link href="https://fonts.googleapis.com/earlyaccess/not...
-フォントの利用は、例えば、以下のように記載します。
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...
-参考：Google Fonts + 日本語早期アクセス
https://googlefonts.github.io/japanese/
&aname(FontAwesome);
~
~
**Font Awesome
Font Awesomeとは、さまざまなアイコンを Webフォント として...
-公式サイト：https://fontawesome.com
~
***CDNを使う
-CSSの場合
<link href="https://use.fontawesome.com/releases/ [バー...
[バージョン] の部分は v5.9.0 など
-JavaScriptの場合
<script defer src="https://use.fontawesome.com/releases/...
[バージョン] の部分は v5.9.0 など
-Version 5 からは 登録ユーザとしてログインすると、以下の...
https://fontawesome.com/kits
以下のような形式の一行を<head>に追加するかたちになります。
<script src="https://kit.fontawesome.com/xxxxxxxxxxx.js"...
~
***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...
~
#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 class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
~
~
**一般的なWebフォントの使い方
自分が所有するフォントデータを使用する場合は、サーバーに...
~
***サーバーにフォントデータを置く
Webに最適化された「Webフォント」のデータをサーバーに置き...
~
***フォントファミリーの定義
CSSファイルに、以下のように記述すると、その freeFont.otf ...
@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...
-[[IPAex / IPA フォント>http://ipafont.ipa.go.jp/]]
-[[FLOP DESIGN>http://www.flopdesign.com/index.html]]
~
***有償のフォント
-[[TypeSquare モリサワ>http://www.morisawa.co.jp/font/pro...
~
~
終了行:
*WEB FONTS
~
Webフォントとは、CSS3で新たに導入された仕様で、ページ中の...
近年、Webページに使用されている文字だけをダウンロードさせ...
~
***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=xxxx...
--以下のような記述を、CSSの当該要素に書く
font-family: xxxxxxxx;
-以上の操作で、Google Fontsを用いた表示が実現します。
~
~
**Google 日本語フォント
Google と Adobe が共同開発したNotoフォントや、M+フォント...
-フォントの登録は、以下いずれかの方法で行います。
--方法１：スタイルシートの先頭で定義ファイルをインポート...
@import url(http://fonts.googleapis.com/earlyaccess/noto...
--方法２：HTMLのヘッダーで読み込む
<link href="https://fonts.googleapis.com/earlyaccess/not...
-フォントの利用は、例えば、以下のように記載します。
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...
-参考：Google Fonts + 日本語早期アクセス
https://googlefonts.github.io/japanese/
&aname(FontAwesome);
~
~
**Font Awesome
Font Awesomeとは、さまざまなアイコンを Webフォント として...
-公式サイト：https://fontawesome.com
~
***CDNを使う
-CSSの場合
<link href="https://use.fontawesome.com/releases/ [バー...
[バージョン] の部分は v5.9.0 など
-JavaScriptの場合
<script defer src="https://use.fontawesome.com/releases/...
[バージョン] の部分は v5.9.0 など
-Version 5 からは 登録ユーザとしてログインすると、以下の...
https://fontawesome.com/kits
以下のような形式の一行を<head>に追加するかたちになります。
<script src="https://kit.fontawesome.com/xxxxxxxxxxx.js"...
~
***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...
~
#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 class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
~
~
**一般的なWebフォントの使い方
自分が所有するフォントデータを使用する場合は、サーバーに...
~
***サーバーにフォントデータを置く
Webに最適化された「Webフォント」のデータをサーバーに置き...
~
***フォントファミリーの定義
CSSファイルに、以下のように記述すると、その freeFont.otf ...
@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...
-[[IPAex / IPA フォント>http://ipafont.ipa.go.jp/]]
-[[FLOP DESIGN>http://www.flopdesign.com/index.html]]
~
***有償のフォント
-[[TypeSquare モリサワ>http://www.morisawa.co.jp/font/pro...
~
~
ページ名:
