WEBフォントを120%活用するための基礎知識＆最新動向 #AdobeMAX2018

## 講師紹介
松田直樹さん　株式会社まぼろし
With高野さん

## CSS Fonts Module Level3
![20181120_181121_0112.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/387beec3-7f1c-9ace-518a-e5b6a602e05b.jpeg)

使用勧告(?)になった。
カーニング、いい感じに文字詰めしてくれる。
日本語フォントのオープンソース化

### 書き方
![20181120_181121_0105.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/4ade9e07-379e-e2b7-cf26-9a72f4e23c37.jpeg)



### コーポレートフォントで魅せる。
![20181120_181121_0111.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/48bbd955-78db-4a76-bcf7-3be4e3dd5d7c.jpeg)

Hey!Say!JUMPもWebフォントらしい。

行政サイトもWebフォントを利用している。
小田原市、渋谷区。

画像文字がなくなりつつある。

## 進化するWEBフォントと表現
Open Type フォントの進化

### Variableフォント

![peace-type.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/eb865a8f-a74b-0724-b34b-be4f01167e31.gif)

（引用元：https://ferret-plus.com/8809）
単独のフォントファイルで、繰り歩幅、太さ、傾斜などの特性を可変させることができる。

4社共同開発
Apple, Google, Microsoft, Adobe

Microsoftのサイトにあるらしい。
https://docs.microsoft.com/en-us/windows/desktop/directwrite/opentype-variable-fonts

従来のフォントは200, 400, 700 ,900と決まっていたが、
Variable Fontでは微妙な太さも表現することができる。

太さ、字幅、斜体などに対応している。

<b>CSSでの表現方法</b>
![20181120_181121_0101.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/244625ab-7bce-4191-5eb9-aff5d689eb22.jpeg)
![20181120_181121_0100.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/1c3a4cad-f394-4986-be87-a93212db950f.jpeg)


### Color Fonts
繰り歩をSVGで定義することで、
2011年、Adobeが提案したらしい。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E8%B2%82%E6%98%8E%E6%9C%9D?src=hash&amp;ref_src=twsrc%5Etfw">#貂明朝</a>、<a href="https://twitter.com/hashtag/%E8%B2%82%E6%98%8E%E6%9C%9D%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#貂明朝テキスト</a> ともカラー絵文字が使えるようになりました！貂ちゃん、天気などもついにカラーで出るだけでなく、ニューカマーの干支と猫も仲間入り。もちろん白黒グリフに切り替えも可能です。すでに貂明朝お使いの方はアクティベートしなおすと使えます！<a href="https://twitter.com/hashtag/AdobeMaxJapan?src=hash&amp;ref_src=twsrc%5Etfw">#AdobeMaxJapan</a> <a href="https://twitter.com/hashtag/AdobeFonts?src=hash&amp;ref_src=twsrc%5Etfw">#AdobeFonts</a> <a href="https://t.co/YHl5qup4gc">pic.twitter.com/YHl5qup4gc</a></p>&mdash; Ryoko Nishizuka (@ryon106) <a href="https://twitter.com/ryon106/status/1064704777500540929?ref_src=twsrc%5Etfw">2018年11月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E8%B2%82%E6%98%8E%E6%9C%9D?src=hash&amp;ref_src=twsrc%5Etfw">#貂明朝</a>、<a href="https://twitter.com/hashtag/%E8%B2%82%E6%98%8E%E6%9C%9D%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#貂明朝テキスト</a> ともカラー絵文字が使えるようになりました！貂ちゃん、天気などもついにカラーで出るだけでなく、ニューカマーの干支と猫も仲間入り。もちろん白黒グリフに切り替えも可能です。すでに貂明朝お使いの方はアクティベートしなおすと使えます！<a href="https://twitter.com/hashtag/AdobeMaxJapan?src=hash&amp;ref_src=twsrc%5Etfw">#AdobeMaxJapan</a> <a href="https://twitter.com/hashtag/AdobeFonts?src=hash&amp;ref_src=twsrc%5Etfw">#AdobeFonts</a> <a href="https://t.co/YHl5qup4gc">pic.twitter.com/YHl5qup4gc</a></p>&mdash; Ryoko Nishizuka (@ryon106) <a href="https://twitter.com/ryon106/status/1064704777500540929?ref_src=twsrc%5Etfw">2018年11月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらもMSのページに仕様書があるので。
https://docs.microsoft.com/en-us/windows/desktop/directwrite/color-fonts

SVG1.1の機能のほとんどを、オープンタイプがサポートする。

カラーフォントはAiで作れるらしい。

これからは人種対応が必要になってくる。

Fontself Makerというプラグインがある。
5000円。

## Webフォントの種類
Adobeフォントのコスパが良いという話でした。
![20181120_181121_0097.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/81cb9f72-30ea-285f-f85e-b072b0c3f30f.jpeg)
![20181120_181121_0098.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63911/cbfe769a-9331-7a43-37bf-7a7cd07c4d9b.jpeg)