可变字体5个注册变化轴效果实例页面
展示
1. weight轴
CSS new world
CSS new world
2. width轴
CSS new world
CSS new world
3. Italic轴
CSS new world
CSS new world
4. Slant轴
CSS new world
CSS new world
5. Optical size轴
CSS new world
CSS new world
代码
-
HTML:
<h4>1. weight轴</h4> <div><input type="range" min="100" max="900" value="400" data-rel="weight"></div> <p class="weight-1" title="font-weight:400">CSS new world</p> <p class="weight-2" title="font-variation-settings: 'wght' 400">CSS new world</p> <h4>2. width轴</h4> <div><input type="range" min="35" max="100" value="100" data-rel="stretch"></div> <p class="stretch-1" title="font-stretch:100%">CSS new world</p> <p class="stretch-2" title="font-variation-settings: 'wdth' 100">CSS new world</p> <h4>3. Italic轴</h4> <div><input type="range" min="0" max="1" value="0" data-rel="italic"></div> <p class="italic-1" title="font-style:normal">CSS new world</p> <p class="italic-2" title="font-variation-settings: 'ital' 0">CSS new world</p> <h4>4. Slant轴</h4> <div><input type="range" min="0" max="12" value="0" data-rel="oblique"></div> <p class="oblique-1" title="font-style:oblique 0deg">CSS new world</p> <p class="oblique-2" title="font-variation-settings: 'slnt' 0">CSS new world</p> <h4>5. Optical size轴</h4> <div><input type="range" min="10" max="72" value="36" data-rel="optical"></div> <p class="optical-1" title="font-optical-sizing:auto">CSS new world</p> <p class="optical-2" title="font-variation-settings: 'opsz' 36">CSS new world</p>
-
CSS:
@font-face { font-family: "Amstelvar VF"; src: url("./AmstelvarAlpha-VF.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 30% 100%; font-style: normal; } @font-face { font-family: "Roboto VF"; src: url("./Roboto-VF.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 75% 100%; font-style: oblique 0deg 12deg; } @font-face { font-family: "Jost VF"; src: url("./jost-VF.woff2") format("woff2-variations"); font-weight: 300 900; font-stretch: 75% 150%; } p { font-family: "Amstelvar VF"; } .oblique-1, .oblique-2 { font-family: "Roboto VF"; } .italic-1, .italic-2 { font-synthesis: none; font-family: "Jost VF"; }