用户电脑没有相应字体怎么办?

前言

在前端开发中想要让页面变得富有创意,与众不同还要美观,字体是个不可或缺的配置。但是有时候会遇到好看的字体用户电脑中没有安装,显示不出来的尴尬.怎么办呢?  我给大家介绍一种解决方法

解决方法:使用Web Fonts

Web Fonts可以使你的网站在任何浏览器上都能展示你想要的字体。这是通过在CSS中引入字体文件实现的。你可以从许多免费和付费的Web Fonts提供商中选择适合你的字体。

详细教程

1.在网上下载我们需要的字体

2. 通过transfonter这个工具Online @font-face generator — Transfonter转换一下，这个工具可以帮我们自动生成 @font-face 写法的代码。

 

 

 

 

3.我们只需要把转换工具生成的压缩包下载、解压到我们项目中，然后在项目中直接加载 transfonter 工具为我们生成的 css文件即可。

如果是vue项目 直接在在main.js 中直接引入 stylesheet.css： import '@/assets/stylesheet.css'

// stylesheet.css 文件

@font-face {
    font-family: '';
    src: url('GLJ-GBT.woff2') format('woff2'),
        url('GLJ-GBT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}   



-----------------------------------------------------
//使用字体文件

test{
    font-family: "" ;    //与 stylesheet.css 中 font-family 对应
    letter-spacing: 3px;
}