css自定义字体@font-face的使用方法

qq_36934775

已于 2023-07-14 10:13:42 修改

阅读量2.2k

点赞数

文章标签： css 前端

于 2023-07-14 10:06:12 首次发布

本文链接：https://blog.csdn.net/qq_36934775/article/details/131716926

版权

文章介绍了如何在Vue项目中定义和引入自定义字体，包括在`@font-face`中声明字体，提供不同格式的字体文件以增强浏览器兼容性，以及在组件中应用这些字体。示例中展示了新建font文件夹，存储ttf文件，创建font.css文件来定义字体，并在Vue组件中引用这些字体的方法。

摘要由CSDN通过智能技术生成

用法

1.定义一个自定义字体

@font-face {
  font-family: 'iconfont';/*声明一个名为iconfont的字体变量*/
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/* IE9以下版本的IE需要这个格式 */
      url('../font/iconfont.woff2') format('woff2'),/* 支持woff2格式的浏览器 */
      url('../font/iconfont.woff') format('woff'),/* 支持woff格式的浏览器 */
      url('../font/iconfont.ttf') format('truetype'),/* 支持truetype格式的浏览器 */
      url('../font/iconfont.svg#iconfont') format('svg');
}

可以设置多个 src 属性，以指定不同的字体资源路径。这样做的目的是为了增强字体的兼容性，以确保在不同的浏览器和设备上都能正常加载字体。

上面设置了三个不同的字体资源路径，分别是 .eot、.woff、.ttf 格式的字体文件，当浏览器无法识别第一个字体文件时，会自动尝试加载第二个字体文件，以此类推。

font-family属性：字体名称自定义
url属性：自定义字体在当前服务器的位置(可填相对路径和绝对路径)
format属性：字体的格式主要用于浏览器识别
通常有以下几种：truetype opentype truetype-aat embedded-opentype avg等

TrueType格式(.ttf)
Windows和Mac上常见的字体格式这是一种原始格式因此并没有为网页进行优化处理
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
以TrueType为基础也是一种原始格式但提供了更多的功能
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
针对网页进行特殊优化因此是Web字体中的最佳格式
它是一个开放的TrueType/OpenType的压缩版同时支持元数据包的分离
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE专用字体格式可以从TrueType格式创建此格式字体
浏览器支持：IE4+

SVG格式(.svg)
基于SVG字体渲染的格式
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

2.引入自定义字体

font-family: "iconfont"

引入的时候 font-family的名称必须和自定义的名称必须一致

项目中用到的

UI给了字体的ttf文件,分别为test.ttf,test2.ttf

1.新建font文件夹

在vue的项目中的assets中新建一个font文件夹，把.ttf文件放在文件夹中，在新建font.css文件，文件内容如下：

@font-face {
    font-family: "TEST";/*指定字体的名称*/
    src: url("test.ttf") format('truetype');/*指定字体文件的路径和格式*/
}
@font-face {
    font-family: "TEST2";
    src: url("test2.ttf");
}

2.在vue组件中引用

<template>
  <div id="textPage"></div>
  <div id="chart"></div>
</template>
<script>
export default{
  name:'test',
  data(){
     chartFamily:['TEST','TEST2']
  },
  mouted(){
     this.initChart()
  },
  methods:{
    initChart(){
        let chart=new Chart({
                container: 'chart',
                autoFit: true,
                // width: 500,
                height: 240,
          })
           chart.axis(positionY, {//X轴样式
                 label: {
                     formatter: (val) => {
                          return val;
                          // return parseInt(val*100).toFixed(2);
                      },
                      style:{
                          fill:"#111",//文字颜色
                          // fontFamily: "Microsoft YaHei",//文字字体
                          fontFamily: this.chartFamily,
                          // fontWeight: 400,//文字粗细
                          fontSize: 14,//文字大小
                       }
                  },
                  line:null,
                  tickLine: null,
           });
    }
  }
}
  
</script>
<style scoped>
#textPage{
  font-family: 'TEST','TEST2'; //组件下的所有字体都修改了
}
</style>