font第三方插入

自己在站长之家找一个合适自己想要的字体，
然后用font-face声明 我开始自创名字，然后给个地址！记得是TTF格式
然后你再别的地方用的时候直接提我的名号

@font-face{
    font-family: ftname;
    src: url(./assets/font/ftname.TTF);
}

li{
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.7;
    font-family: ftname;

}

---

canvas 怎么办？

普通人以为用 ctx.font = "36px ftname"就行了，但是你真正用的时候才发现不好使
我一直以为canvas就是不支持第三方外部引入，但是今天在思否看到了他
@vczhan的文章才恍然大悟
重点在后面new FontFace('自定义', '你家地址')
myFont.load加载后，then拉出来，document.fonts.add(font)你可以理解为：
全局的字体库中把他拉进我们家族

        var canvas = document.getElementById("xx")
        var o = canvas.getContext("2d")

        function paper(x1, y1, x2, y2) {
            o.beginPath()
            o.setLineDash([10, 20])
            o.lineTo(x1, y1)
            o.lineTo(x2, y2)
            o.stroke()
        }

        paper(0, 0, 800, 800)
        paper(800, 0, 0, 800)
        paper(0, 400, 800, 400)
        paper(400, 0, 400, 800)


        const myFont = new FontFace('AaGeng', 'url(./font/AaGeng.ttf)')

        myFont.load().then(font => {
            document.fonts.add(font)
        }).then(() => {
            o.beginPath()
            o.font = "normal small-caps 100 500px/1.7 AaGeng"
            o.textAlign = "center"
            o.textBaseline = "middle"
            o.fillText("傻", 400, 400)
        })

最最后一点

必须把CSS算进来， 因为他扮演的并不是说在js里面你就能用上三方字体库
他只是帮你把这个加载完后再用的意思。所以在CSS中加一句！完毕

    @font-face {
        font-family: AaGeng;
        src: url("./font/AaGeng.ttf") format("truetype");
    }

---

---

---

---

---

爱我你怕了吗