css:网页引入网络字体@font-face
<style > /* 引入字体 */ @font-face { font-family: "站酷高端黑 Regular"; font-weight: 400;src: url("//at.alicdn.com/wf/webfont/CMLt9HVp5N87/tbHddmDWiU1GEuhi4nhKp.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/CMLt9HVp5N87/WGIJOcs-yNAu59k-p4jVL.woff") format("woff"); font-display: swap; } /* 使用字体 */ .box{ font-family: "站酷高端黑 Regular"; } </style>
说明
font-display 有五种属性：
auto：使用浏览器默认的行为； block：浏览器首先使用隐形文字替代页面上的文字，并等待字体加载完成再显示； swap：如果设定的字体还未可用，浏览器将首先使用备用字体显示，当设定的字体加载完成后替换备用字体； fallback：与 swap 属性值行为上大致相同，但浏览器会给设定的字体设定加载的时间限制，一旦加载所需的时长大于这个限制，设定的字体将不会替换备用字体进行显示。 Webkit 和 Firefox 中设定此时间为 3s； optional：使用此属性值时，如果设定的字体没有在限制时间内加载完成，当前页面将会一直使用备用字体，并且设定字体继续在后台进行加载，以便下一次浏览时可以直接使用设定的字体。
动态加载字体
async function loadFont(fontName, fontUrl) { const font = new FontFace(fontName, `url(${fontUrl})`) await font.load() document.fonts.add(font) }
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/FontFace
Experimental: 这是一个实验中的功能
