Web Fonts

Web Fonts

  • テキストP.260
  • CSS3.0 fonts module
  • Webフォントはコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなう文字表示を行うシステムおよびそのフォント
  • 文字で表現できることにより、見出しやタイトルの画像を各デバイス向けにひとつひとつ作らなくてよい
Google Fonts
  • Goolge社のサービスを使うと、簡単に好きなWebフォントを使うことができます

f:id:web-0220:20180611002124p:plain

Google Fonts + Japanese Early Access

googlefonts.github.io

f:id:web-0818:20170528000950p:plain

利用方法
  • Robotoの場合

f:id:web-0818:20170528002108p:plain

f:id:web-0818:20170528003039p:plain

  • CUSTOMIZE(medium 500)
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<style>
h1 {
  width: 240px;
  padding: 4px 0 4px 6px;
  border-top: 2px solid #7A7837;
  border-bottom: 2px solid #7A7837;
  font-family: 'Roboto', sans-serif;
  color: #7A7837;
  font-weight: normal;
  letter-spacing: 9px;
  text-align: center;
}

f:id:web-0818:20170528005020p:plain

Font Awsome
  • 5を使用せずに「4.7.0」を利用します

f:id:web-0220:20180611000500p:plain

  • アイコンは、画像にせずに文字を利用します

font-awesome CDN

f:id:web-0220:20180611001627p:plain

BootstrapCDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
アイコンを表示する

f:id:web-0818:20170116003713p:plain

<div class="snsmenu">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i><span>Google+</span></a></li>
<li><a href="#"><i class="fa fa-rss"></i><span>RSS</span></a></li>
</ul>
</div>
<form action="#" class="search" method="get">
<input id="q" name="q" type="search" value=""><button type="submit"><i class="fa fa-search"></i><span>検索</span></button>
</form>

求職者支援訓練 フェリカテクニカルアカデミー