其他分享
首页 > 其他分享> > vue.js3: 引入外部字体文件(vue@3.2.36)

vue.js3: 引入外部字体文件(vue@3.2.36)

作者:互联网

一,思源黑体和思源宋体的下载地址:

思源黑体
https://github.com/adobe-fonts/source-han-sans/releases
思源宋体
https://github.com/adobe-fonts/source-han-serif/releases

说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,安装字体文件

下载字体后解压, 复制到static/fonts目录下:如图:

三,css代码

1,在App.vue中添加样式
<style>
@font-face {
  font-family: "SourceHanSerifSC-ExtraLight";
  src: url(../public/static/fonts/SourceHanSerifSC-ExtraLight.otf);
}
@font-face {
  font-family: "SourceHanSerifSC-Heavy";
  src: url(../public/static/fonts/SourceHanSerifSC-Heavy.otf);
}
</style>
2,实际应用:
<template>
  <div>
     <div style="position: relative;width:375px;height:500px;overflow: hidden;background: lightgray;" >
        <img class="imgstyle" id="img" src="static/image/dog.jpg" />
         <div contenteditable="true"
              style="font-family:SourceHanSerifSC-Heavy;width:300px;height:200px;position: absolute;left:50px;
top:50px;width: 300px; height: auto; position: absolute; left: 50px; top: 50px;font-size:50px;
text-align:left;">这是一个可编辑的信息,测试思源的字体文件</div> </div> </div> </template>

四,测试效果:

五,查看vue框架的版本

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.36 deduped
├─┬ element-plus@2.2.2
│ ├─┬ @element-plus/icons-vue@1.1.4
│ │ └── vue@3.2.36 deduped
│ ├─┬ @vueuse/core@8.6.0
│ │ ├─┬ @vueuse/shared@8.6.0
│ │ │ └── vue@3.2.36 deduped
│ │ ├─┬ vue-demi@0.13.1
│ │ │ └── vue@3.2.36 deduped
│ │ └── vue@3.2.36 deduped
│ └── vue@3.2.36 deduped
└─┬ vue@3.2.36
  └─┬ @vue/server-renderer@3.2.36
    └── vue@3.2.36 deduped 

 

标签:vue,36,deduped,js3,3.2,font,com
来源: https://www.cnblogs.com/architectforest/p/16374237.html