html 字体设置 (web端字体设置)

news2024/10/5 16:47:26

windows自带的字体是有版权的,包括微软雅黑(方正)、宋体(中易)、黑体(中易)等
版权算是个大坑,所谓为了避免版权问题,全部使用开源字体即可
我这里选择的是思源宋体,有两种加载方式

一、在线调用方式

google在线字体服务是没被屏蔽的,可以用。
但是选取字体的页面是不稳定的访问:google font链接

1.搜索Noto Serif SC

在这里插入图片描述

2.获取使用方式

在这里插入图片描述

3.

在这里插入图片描述

4.浏览器处理

引用处引用

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap" rel="stylesheet">

具体内容处引用

body{
font-family: "Noto Serif SC", serif;
}

二、本地调用方式

1.下载文件到项目目录

比如我放到/modules/font目录下

2.引用字体

html的css sytle中写入

font-family: 'Source Han Sans';
src: url('/modules/font/SourceHanSerifCN-Regular-1.otf') format('opentype');
font-weight: normal;
font-style: normal;

然后再调用,比如body。后面的serif是如果加载失败用默认的字体

body{
font-family: "Source Han Sans", serif;
}

3.加载速度优化

因为一个字体文件10来兆,加载速度慢,可以用cdn加速或者在线加载方式

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

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

相关文章

Java进阶学习笔记10——子类构造器

子类构造器的特点&#xff1a; 子类的全部构造器&#xff0c;都会先调用父类的构造器&#xff0c;再执行自己。 子类会继承父类的数据&#xff0c;可能还会使用父类的数据。所以&#xff0c;子类初始化之前&#xff0c;一定先要完成父类数据的初始化&#xff0c;原因在于&…

【pyspark速成专家】7_SparkSQL编程1

目录 一&#xff0c;RDD&#xff0c;DataFrame和DataSet对比 二&#xff0c;创建DataFrame 本节将介绍SparkSQL编程基本概念和基本用法。 不同于RDD编程的命令式编程范式&#xff0c;SparkSQL编程是一种声明式编程范式&#xff0c;我们可以通过SQL语句或者调用DataFrame的相…

2024Spring> HNU-计算机系统-实验4-Buflab-导引+验收

前言 称不上导引了&#xff0c;因为验收已经结束了。主要是最近比较忙&#xff0c;在准备期末考试。周五晚上才开始看实验&#xff0c;自己跟着做了一遍实验&#xff0c;感觉难度还是比bomblab要低的&#xff0c;但是如果用心做的话对于栈帧的理解确实能上几个档次。 实验参考…

ClickHouse 24.4 版本发布说明

本文字数&#xff1a;13148&#xff1b;估计阅读时间&#xff1a;33 分钟 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 新的一个月意味着新版本的发布&#xff01; 发布概要 本次ClickHouse 24.4版本包含了13个新功能&#x1f381;…

List Control控件绑定变量

创建基于对话框的mfc项目 添加 List Control控件 右击控件&#xff0c;选择“添加变量” 在初始化对话框代码中增加一些代码 BOOL CMFCApplication3Dlg::OnInitDialog() { //...// TODO: 在此添加额外的初始化代码DWORD dwStyle m_programLangList.GetExtendedStyle(); …

程序员的那些经典段子

哈喽&#xff0c;大家好&#xff0c;我是明智&#xff5e; 本周咱们已经解决了在面试中经常碰到的OOM问题&#xff1a; 《美团一面&#xff0c;发生OOM了&#xff0c;程序还能继续运行吗&#xff1f;》 《美团一面&#xff1a;碰到过OOM吗&#xff1f;你是怎么处理的&#xff1…

【Linux】Linux的基本指令_1

文章目录 二、基本指令1. whoami 和 who2. pwd3. ls4. clear5. mkdir 和 cd6. touch7. rmdir 和 rm 未完待续 二、基本指令 直接在命令行的末尾&#xff08;# 后面&#xff09;输入指令即可。在学习Linux指令的过程中&#xff0c;还会穿插一些关于Linux的知识点。 1. whoami …

AI助力垃圾分类开启智慧环保新时代,基于卷积神经网络模型开发实践垃圾分类识别系统

在快节奏的现代生活中&#xff0c;垃圾分类已经成为一项重要的环保举措。然而&#xff0c;面对日益复杂的垃圾种类和繁多的分类标准&#xff0c;许多人感到困惑和无奈。幸运的是&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI深度学习模型为垃圾分类带来了革命性的变化…

人工智能 框架 paddlepaddle 飞桨 使用指南 使用例子 线性回归模型demo 详解

安装过程&使用指南&线性回归模型 使用例子 本来预想 是安装 到 conda 版本的 11.7的 但是电脑没有gpu 所以 安装过程稍有变动,下面简单讲下 conda create -n paddle_env117 python=3.9 由于想安装11.7版本 py 是3.9 所以虚拟环境名称也是 paddle_env117 activa…

嵌入式全栈开发学习笔记---C语言笔试复习大全21(编程题25~30)

目录 25、实现字符串的排序。&#xff08;输入hello world good&#xff0c;输出good hello world&#xff0c;其中字符串个数任意&#xff09; 26、输入两个有序的字符串&#xff08;从小到大&#xff09;&#xff0c;合并成一个有序的字符串。&#xff08;输入cdhxyz fjln …

利用EAS自动生成数据模型和sql脚本

EAS适用于敏捷开发中小系统,这节主要讲解EAS对应的模型和数据库脚本输出应用。 在这个应用程序中,用户可自定义实体模型和枚举模型,只要选择相应的实体或者枚举进行右击添加即可。 解决方案参数设定,在解决方案的设定中可设置项目名称、通用语言,命名空间和输出位置。 连…

Python+Flask+Pandas怎样实现任意时间范围的对比数据报表

话不多说,有图有源码: 1.上图 2.因为是低代码的,只能发重要有用的代码片段了 实现思路:1)获取指定时间范围内的数据:2)df合并 #----------年份替换----------------for syear in range(int(byear),int(eyear)1):start_datestr(syear)strbdate[4:]end_datestr(syear)stredate…

2024-05-22 VS2022使用modules

点击 <C 语言编程核心突破> 快速C语言入门 VS2022使用modules 前言一、准备二、使用其一, 用VS installer 安装模块:第二个选项就是, 与你的代码一同编译std模块, 这个非常简单, 但是也有坑. 总结 前言 要解决问题: 使用VS2022开启modules. 想到的思路: 跟着官方文档整…

Linux更改系统中的root密码

Linux里面的root密码忘记了怎么办&#xff1f; 1 更改系统中的 root 密码 &#xff08;1&#xff09;键盘 CtrlAltT 快捷键打开终端。 &#xff08;2&#xff09;在终端窗口中输入以下代码&#xff1a; sudo passwd root &#xff08;3&#xff09;输入锁屏密码 &#xf…

kali下载zsteg和stegpy

1.kali下载zsteg 从 GitHub 上克隆zsteg到kali git clone https://github.com/zed-0xff/zsteg 切换目录 cd zsteg 用于安装名为 zsteg 的 Ruby Gem 包 gem install zsteg 2.kali下载stegpy 下载网站内的stegpy-master压缩包GitCode - 开发者的代码家园 并拉到kali中 切换到s…

String s1 = new String(“abc“);这句话创建了几个字符串对象?

首先&#xff0c;我们来聊聊Java中的字符串&#xff08;String&#xff09;。在Java里&#xff0c;字符串是不可变的&#xff0c;也就是说&#xff0c;一旦我们创建了一个字符串&#xff0c;它的值就不能更改了。这涉及到几个核心概念&#xff1a; 字符串常量池&#xff1a;这是…

Pytorch深度学习实践笔记5

&#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;pytorch深度学习 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质就是极致重复! 视频来自【b站刘二大人】 目录 1 Linear Regress…

Java 登录错误次数限制,用户禁登1小时

手机号验证码登录&#xff0c;验证码输入错误次数超5次封禁 Overridepublic boolean checkCaptcha(String phoneNum, String captcha) {String codeNum (String) redisTemplate.opsForValue().get(UserCacheNames.USER_CAPTCHA phoneNum);if (codeNum null) {throw new Wan…

2024 ISCC pwn wp

iscc 练武pwn 总结第一周chaosISCC_easyFlagshopping 第二周ISCC_easyISCC_Uheapheap 第三周miaoYour_programeazy_heap 总结 总体感觉iscc考察的题目都挺基础的&#xff0c;在目前这种比赛的大环境下&#xff0c;仍然出这种&#xff0c;比较基础的题目&#xff0c;实在是难得…

24李林跌落神坛,880还刷吗?还是换1000、900、660?

“李林今年跌落神坛了&#xff01;” “全是固定题型没新题&#xff0c;结果今年考的全是新题。” 880是“老真题的神”&#xff0c; 遇到24年&#xff0c;冷门考点多&#xff0c;计算量又大&#xff0c;就不灵了。 但“老真题”&#xff0c;还是得刷。就像往年真题是要刷的…