Vue使用font-face自定义字体详解

目录

      • 1 介绍
      • 2 使用
        • 2.1 语法
        • 2.2 属性说明
        • 2.3 Vue使用案例
          • 2.3.1 全局定义字体
          • 2.3.2 在页面使用
      • 3 注意事项

1 介绍

@font-face 是 CSS 中的一个规则,它允许你加载服务器上的字体文件(远程或者本地),并在网页中使用这些字体。这样,你可以使用非标准字体,从而给网页带来独特的视觉风格。

2 使用

2.1 语法
@font-face {  font-family: 'MyCustomFont';  src: url('myfont.woff2') format('woff2'),  url('myfont.woff') format('woff');  font-weight: normal;  font-style: normal;  
}
2.2 属性说明
  • font-family: 为自定义字体定义一个名称,后续在 CSS 中使用这个名称来引用这个字体。
  • src: 指定字体文件的 URL。你可以指定多个字体文件(远程或者本地,建议天秤本地地址,更具可靠性),浏览器会按照列出的顺序尝试加载。建议包含多种格式的字体文件,以确保在各种浏览器上的兼容性。
  • format: 指定字体文件的格式。这有助于浏览器确定如何解释文件。常见的格式包括 woff2, woff, ttf, eot, svg 等。
  • font-weightfont-style: 这些属性定义了字体的粗细和样式(如斜体)。

其中format()描述符用于指定字体文件的格式。这对于浏览器来说是非常重要的,因为它可以帮助浏览器正确地解析和加载字体文件。不同的浏览器可能支持不同的字体格式,因此提供多种格式可以确保更广泛的浏览器兼容性。

以下是format()描述符中常用的一些字体格式及其简要说明:

  1. woff2:
    • WOFF 2.0 是 WOFF(Web Open Font Format)的更新版本,它提供了更好的压缩和更广泛的浏览器支持。
    • 它是目前推荐的字体格式,因为它提供了优秀的压缩效果,并且被现代浏览器广泛支持。
  2. woff:
    • WOFF(Web Open Font Format)是专为网页设计的字体格式。
    • 它提供了良好的压缩效果,并且与多种浏览器兼容。
    • 如果不需要woff2格式,woff是一个很好的备选方案。
  3. truetype (或 ttf):
    • TrueType是一种广泛使用的字体格式,它支持高质量的字体渲染。
    • 然而,TrueType字体文件通常较大,不如woff或woff2压缩效果好。
    • 在某些情况下,特别是当其他格式不可用时,可以使用TrueType。
  4. opentype (或 otf):
    • OpenType是另一种广泛使用的字体格式,它支持多种字符集和丰富的字体特性。
    • 与TrueType类似,OpenType字体文件也可能较大。
  5. svg:
    • SVG(Scalable Vector Graphics)字体是基于矢量的,这意味着它们可以缩放到任何大小而不会失去清晰度。
    • 然而,SVG字体通常比其他格式更大,并且不如其他格式常用。
    • 它们主要在老版本的浏览器中用于支持某些特殊字符集。
  6. eot:
    • EOT(Embedded OpenType)是微软开发的一种字体格式,主要用于旧版本的Internet Explorer浏览器。
    • 随着Internet Explorer的使用率下降,EOT的需求也在减少。
  7. bitmap formats (如 png, gif):
    • 位图字体通常不是通过@font-face加载的,因为它们是基于像素的,不支持缩放。
    • 它们主要用于特定的情况,如创建自定义图标字体。

@font-face规则中使用format()描述符时,你应该列出所有你提供的字体格式,以便浏览器进行兼容。浏览器会按照你列出的顺序尝试加载字体,直到找到它支持的格式为止。

2.3 Vue使用案例
2.3.1 全局定义字体

index.html进行字体定义,以便全局都能访问到(实际生产上不建议这么做,加载会消耗资源);这里我们定义两个字体:

  1. SourceHanSansCN;
  2. KaiTi
    @font-face {/* 思源黑体 */font-family: 'SourceHanSansCN';  src: url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('otf'),  url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('woff2');  font-weight: normal;  font-style: normal; }@font-face {/* 楷体 */font-family: 'KaiTi';  src: url('../src/assets/fonts/KaiTi.ttf') format('otf');font-weight: normal;  font-style: normal; }
2.3.2 在页面使用
<template><label class="siyuan">零星可比炽日华,字若珠玑句无瑕</label><br /><label class="kaiti">我是楷体</label>
</template>
<script>
export default {};
</script>
<style scoped>
.siyuan {font-family: "SourceHanSansCN", sans-serif;color: red;
}
.kaiti {font-family: "KaiTi", sans-serif;color: green;
}
</style>

效果如下:
在这里插入图片描述

3 注意事项

  • 字体文件可能会比较大,因此加载它们可能会对页面加载速度产生影响。为了优化性能,考虑使用字体压缩技术,并只包含你实际需要的字符集。
  • 确保你有权使用你正在加载的字体。一些字体可能受到版权保护,未经许可不得用于商业用途。
  • 测试你的字体在各种浏览器和设备上的兼容性。不同的浏览器和设备可能对不同的字体格式有不同的支持程度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年3月26日 十二生肖 今日运势

小运播报&#xff1a;2024年3月26日&#xff0c;星期二&#xff0c;农历二月十七 &#xff08;甲辰年丁卯月己丑日&#xff09;&#xff0c;法定工作日。 红榜生肖&#xff1a;鸡、鼠、猴 需要注意&#xff1a;马、狗、羊 喜神方位&#xff1a;东北方 财神方位&#xff1a;…

VUE父子组件的传参问题

1.父组件向子组件传参 1&#xff09;这是一个父组件 //这是一个父组件 <div> <port :port-List"portList" ></port> </div> //port 这是子组件的名称export default{components: {},props: {},data() {return{portList:,}},computed: {}…

模式实现vue事件总线

前言&#xff1a;发布订阅模式&#xff0c;还具有解除订阅功能 模拟实现 function fn1(n1, n2) {console.log(first add, n1, n2)} function fn2(n1, n2) {console.log(second add, n1, n2)} function fn3(n1, n2) {console.log(third add, n1, n2)}class MYVue {constructor…

22.保护性暂停扩展(一对一)

如果需要多个类之间使用GuardedObject对象&#xff0c;作为参数传递不是很方便&#xff0c;因此设计一个解耦的中间类&#xff0c;这样不仅能够解耦结果的等待者和结果生产者&#xff0c;还能够支持多个任务的管理。 Futures就好比居民楼一层的信箱&#xff0c;每个信箱有房间的…

HarmonyOS实战开发-如何使用首选项能力实现一个简单示例。

介绍 本篇Codelab是基于HarmonyOS的首选项能力实现的一个简单示例。实现如下功能&#xff1a; 创建首选项数据文件。将用户输入的水果名称和数量&#xff0c;写入到首选项数据库。读取首选项数据库中的数据。删除首选项数据文件。 最终效果图如下&#xff1a; 相关概念 首选…

Facebook如何使用增强技术提升广告效果?

AR in AD - case study 脸书2021年宣布了引入AR的新方法&#xff0c;以推动其应用套件中的产品发现和购买。但他们首先考虑是技术。据脸书称&#xff0c;技术一直是增强现实在其应用程序中更广泛使用的主要障碍。这就是为什么它现在正在做出改变&#xff0c;使企业主和广告商更…

TextMeshPro图文混排的两种实现方式,不打图集

TMP图文混排 方案一&#xff1a;TMP自带图文混排使用方法打包图集使用 方案二&#xff1a;不打图集&#xff0c;可以使用任何图片 接到一个需求&#xff0c;TextMeshPro 图文混排。 方案一&#xff1a;TMP自带图文混排 优点布局适应优秀&#xff0c;字体左中右布局位置都很不错…

Web常见标签属性

应用软件&#xff1a;c/s&#xff08;客户端与服务端&#xff09; b/s&#xff08;服务器与浏览器架构&#xff09;web前端&#xff1a;html5、css3、JavaScriptHtml5&#xff1a;超文本标记语言 超链接标签 语法规范<标签名> marquee 标签之间可以嵌套属性&#xff1a;…

Redis中的事务机制

Redis中的事务机制 概述。 事务表示一组动作&#xff0c;要么全部执行&#xff0c;要么全部不执行。例子如下。 Redis提供了简单的事务功能&#xff0c;讲一组需要一起执行的命令放到multi和exec两个命令之间。multi命令代表事务开始&#xff0c;exec命令代表事务结束&#x…

【项目】均衡代码评测

TOC 目录 项目介绍 开发环境 主要技术 项目实现 公共模块 日志 工具类 编译运行模块 介绍 编译 运行 编译和运行结合起来 业务逻辑模块 介绍 MVC模式框架 模型&#xff08;Model&#xff09; 视图&#xff08;View) 控制器&#xff08;Controller&#xff09…

使用html做一个2048小游戏

下载地址: https://pan.xunlei.com/s/VNtiF13HxmmE4gglflvS1BUhA1?pwdvjrt# 提取码&#xff1a;vjrt”

Linux文件系统 底层原理

linux文件、目录、Inode inode负责文件的元数据和数据存储&#xff0c;文件存储块负责实际数据的存储&#xff0c;而目录文件维护文件名和inode之间的联系。 1. 用户空间到内核空间 首先&#xff0c;当用户程序请求打开一个文件时&#xff08;例如使用open系统调用&#xff09…

C/C++ 一些使用网站收集...

C/C 标准 各种语言协议标准文档 open-std.org 网站 C语言标准文档 open-std.org C基金会网站 C/C 标准库网站 c/c 标准库 cplusplus.com 网站 c/c标准库 cppreference.com 网站 C Core Guidelines【isocpp.org】 C/C 发展 C现有状态及未来规划【isocpp.org】

Excel 打开后提示:MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用&#xff0c;但无法列出导致循环的引I用。请尝试编辑上次输入的公式&#xff0c;或利用“撤消”命令删除该公式&#xff0c;如下图&…

Matplotlib如何显示多张图片(管理多个子图)

Matplotlib 可以使用 subplot 或 subplots 方法来创建子图&#xff0c;从而在同一窗口中显示多张图片。以下是一些示例代码&#xff0c;展示如何使用 Matplotlib 显示多张图片&#xff1a; 1.使用 subplot import matplotlib.pyplot as plt import matplotlib.image as mpi…

微服务(基础篇-003-Nacos)

目录 Nacos注册中心&#xff08;1&#xff09; 认识和安装Nacos&#xff08;1.1&#xff09; Nacos快速入门&#xff08;1.2&#xff09; 服务注册到Nacos(1.2.1) Nacos服务分级存储模型&#xff08;1.3&#xff09; 配置集群&#xff08;1.3.1&#xff09; 根据集群修改…

pta L1-004 计算摄氏温度

L1-004 计算摄氏温度 分数 5 全屏浏览 切换布局 作者 陈建海 单位 浙江大学 给定一个华氏温度F&#xff0c;本题要求编写程序&#xff0c;计算对应的摄氏温度C。计算公式&#xff1a;C5(F−32)/9。题目保证输入与输出均在整型范围内。 输入格式: 输入在一行中给出一个华氏…

如何用Airtest脚本连接无线Android设备?

之前我们已经详细介绍过如何用AirtestIDE无线连接Android设备&#xff0c;它的关键点在于&#xff0c;需要先 adb connect 一次&#xff0c;才能点击 connect 按钮无线连接上该设备&#xff1a; 但是有很多同学&#xff0c;在使用纯Airtest脚本的形式连接无线设备时&#xff0c…

odoo中,使用paramiko库ssh连接Linux

在 Python 中&#xff0c;可以使用 Paramiko 库来实现 SSHClient 连接。Paramiko 是一个用于远程登录、文件传输和自动化的 SSH 客户端库。 import paramiko# 创建 SSHClient 对象 ssh paramiko.SSHClient()# 设置自动添加主机密钥 ssh.set_missing_host_key_policy(paramiko.…

K8s-网络原理-下篇

引言 本文是《深入剖析 K8s》的学习笔记&#xff0c;相关图片和案例可从https://github.com/WeiXiao-Hyy/k8s_example中获取&#xff0c;欢迎Star! K8s 的网络隔离: NetWorkPolicy K8s 如何考虑容器之间网络的“隔离” -> NetWorkPolicy 以下是一个 NetWorkPolicy 的定义…