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", "MS P明朝", "MS 明朝", 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