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

用法

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>