css自定义字体@font-face的使用方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文件，文件内容如下：文章来源地址https://www.toymoban.com/news/detail-584472.html

@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>