WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

フォントファイルを使って文字にフォントを適用させる

TrueTypeFont(トゥルータイプフォント)

拡張子「.ttf 」「.ttc

OpenTypeFont(オープンタイプフォント)

拡張子「.otf」

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@font-face {
  font-family: MyFont;
  src: url('font/Outer_Space.ttf') format("truetype");
}
html, body, div, h1, h2, h3, h4, p, small, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
h1 {
  font-family: MyFont;
  font-size: 80px;
  text- align: center;
  padding: 20px 0;
}
</style>
</head>
<body>
<h1>OpenType and TrueType</h1>
</body>
</html>