为项目加入第三方字体DS-Digital，并使用

最新推荐文章于 2024-06-04 15:33:23 发布

码田里的小白菜

最新推荐文章于 2024-06-04 15:33:23 发布

阅读量2.9k

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_45294459/article/details/125146585

版权

前端项目中经常使用到各种各样的字体样式，此处以DS-Digital为例，先放效果图，

1、DS-Digital字体资源，在如下链接中下载，然后解压

链接: https://pan.baidu.com/s/1yG-asAfmqAN96UTXsXW9Iw 提取码: ex98 复制这段内容后打开百度网盘手机App，操作更方便哦

2、将解压后的文件放入项目根目录，如下

3、在需要文件中引入，此处写了一个demo

直接使用style="font-family: DS-Digital;"就可以使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        @font-face {
            font-family: 'DS-Digital';
            src:
                url(/teduvue1/zwwvue/public/fonts/DS-Digital/DS-DIGIT-4.ttf),
                url(/teduvue1/zwwvue/public/fonts/DS-Digital/DS-DIGII-3.ttf),
                url(/teduvue1/zwwvue/public/fonts/DS-Digital/DS-DIGIB-2.ttf),
                url(/teduvue1/zwwvue/public/fonts/DS-Digital/DS-DIGI-1.ttf);
        }
    </style>
    <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>

<body>
    <div id="app" style="    background-color: aliceblue; width: 1000px; height:500px">
        erefefeeeeeeeeeeeef
        <span style="font-family: DS-Digital;">erefefeeeeeeeeeeeef{{da}}</span>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                da: 'eefffff2',
            },
        });
    </script>
</body>

</html>

码田里的小白菜

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
为项目加入第三方字体DS-Digital，并使用

前端项目中经常使用到各种各样的字体样式，此处以DS-Digital为例，先放效果图，1、DS-Digital字体资源，在如下链接中下载，然后解压链接: https://pan.baidu.com/s/1yG-asAfmqAN96UTXsXW9Iw 提取码: ex98 复制这段内容后打开百度网盘手机App，操作更方便哦2、将解压后的文件放入项目根目录，如下 3、在需要文件中引入，此处写了一个demo 直接使用style="font-family: DS-Digital;"就可以使用...
复制链接

扫一扫