Font - yagisawatakuya/Wiki GitHub Wiki

font-size

■ rem

html {
    font-size: 62.5%; //1em=10px
}
p {
    font-size: 12px;
    font-size: 1.2rem;
}

■ vw

html {
    // 320pxの横幅を基準にfont-sizeを指定する場合
    font-size: calc(100vw / 32);
}
@media screen and (min-width: 769px) {
    html {
        font-size: 62.5%;
    }
}

p {
    font-size: 1.6rem;
}

例：）vwの計算式 14 / 320 * 100 = 4.375vw （表示させたいフォントサイズ / 画面の横幅 * 100 = vw） 参考：https://qiita.com/katsunory/items/3bede89cee8e2ded8426#font-size-vw%E3%81%A8%E3%81%84%E3%81%86%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95

font-family

// 游ゴシック体
font-family: "游ゴシック体", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, sans-serif;

// 游明朝
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

@font-face

テキストを表示するための独自フォントを指定

@font-face {
  font-family: "DINCondensed-Bold";
  font-weight: 700;
  font-style: normal;
  src:
    url(fonts/DINCondBold/DINCondBold.eot?#iefix) format("embedded-opentype"),
    url(fonts/DINCondBold/DINCondBold.woff) format("woff"),
    url(fonts/DINCondBold/DINCondBold.ttf) format("truetype"),
    url(fonts/DINCondBold/DINCondBold.svg#DINCondBold) format("svg");
}

body {
  font-family: "DINCondensed-Bold";
}

Noto Sans JP

※ローカルの"Noto Sans JP"は使わない ※ウェブフォントの"Noto Sans Japanese"をローカルにインストールすると、フォント名は"Noto Sans JP"となってしまう。 https://qiita.com/sutara79/items/7f0c6365e5935311b1f8#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AEnoto-sans-jp%E3%81%AF%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84

@font-face {
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local("Noto Sans CJK JP Regular"),
                url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
                url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
                url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

日本語フォント字詰め

font-feature-settings : "palt";

##Webフォントサブセット化

##サブセットフォントメーカー https://opentype.jp/subsetfontmk.htm

##WOFFコンバータ https://opentype.jp/woffconv.htm

##サイト https://www.fontconverter.org

参考サイト https://heysho.com/webfont/ http://brian.hatenablog.jp/entry/how-to-set-web-fonts