svg中自定义字体样式失效的解决方式

关于svg字体样式失效，网上有很多解决方式，我也尝试过很多方法，下面说一下两个尝试成功的两个方法。

一、把字体样式文件转成base64编码，直接嵌入svg中

起初我想在img元素的src引入svg，所以采用了这种做法，但是这种做法会导致整个svg图片过大，不利于网页加载，下面是具体代码示例

      <style>
            @font-face{
                font-family:"myfont",
                src:url(data:font/truetype;base64)//括号内的是base64编码文件
                }
        </style> 
       <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 2rem 2rem" fill="none">
                <rect width="2rem" height="2rem" fill="white" />
                <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="16" font-family="myfont">light</text>
            </svg>

二、svg直接嵌入html中

直接把svg嵌入html中，这样就可以在css文件中自定样式，然后使用即可，缺点是需要自己根据网页需求设置svg图片的大小

    <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 2rem 2rem" fill="none">
                <rect width="2rem" height="2rem" fill="white" />
                <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="16" class="font-custom">light</text>
                // font-custom 是关于字体样式的类
            </svg>