哇去，有了这篇文章，项目中引入了再多的字体包，我都不怕了！！！

通常情况下，我们在开发一个新项目的时候，项目那边通常都会提供一些项目所需的字体包，来满足项目对字体展示的特殊需求。

这部分大家都比较熟悉，就不详细讲了，直接上代码：

/* 引入字体包 */
@font-face {font-family: "SourceHanSansCN";src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}
<div class="font-container page-container"><p class="font-css font">测试字体abcde12345</p>
</div>
.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;&.font {font-family: 'SourceHanSansCN';}
}

 效果如下：

至此，即可简单的引入自定义字体了。

然而，实际项目中，我们不可能只用一个字体字重吧，我们还需要考虑到在不同的模块下使用不同的字体字重的情况，这也简单，使用 【font-weight】，具体代码如下：

<div class="font-container page-container"><p class="font-css light">测试字体abcde12345</p><p class="font-css regular">测试字体abcde12345</p><p class="font-css medium">测试字体abcde12345</p><p class="font-css bold">测试字体abcde12345</p>
</div>
.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'SourceHanSansCN';&.light {font-weight: 300;}&.regular {font-weight: 400;}&.medium {font-weight: 500;}&.bold {font-weight: 700;}
}

效果如下：

但是我们会发现

虽然我们设置了相对应的字重，但是并不是所有字体的字重都会生效。

这就不得不提我之前的发现了，由于不同浏览器对字体字重的兼容有所不同，比如500在ios系统那边会生效但是window这边不会生效；同时不同字体也不一定都包含兼容所有的字重，所以就会出现上面设置不同字重不生效的情况；而且实际项目过程中有时候简单地设置字重不一定能满足项目对字体字重的要求。

那怎么办呢，既然简单地设置字重不行，那么我们换个思路，引入不同字重的字体包试试。

说干就干：

/* 引入字体包 */
@font-face {font-family: "SourceHanSansCN-light";src: url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字体包 */
@font-face {font-family: "SourceHanSansCN-regular";src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字体包 */
@font-face {font-family: "SourceHanSansCN-medium";src: url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字体包 */
@font-face {font-family: "SourceHanSansCN-bold";src: url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}
<div class="font-container page-container"><p class="font-css light">测试字体abcde12345</p><p class="font-css regular">测试字体abcde12345</p><p class="font-css medium">测试字体abcde12345</p><p class="font-css bold">测试字体abcde12345</p>
</div>
.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;&.light {font-family: 'SourceHanSansCN-light';}&.regular {font-family: 'SourceHanSansCN-regular';}&.medium {font-family: 'SourceHanSansCN-medium';}&.bold {font-family: 'SourceHanSansCN-bold';}
}

效果如下：

简单做个对比

通过对比，不难发现差距还是很明显的，效果也是很明显的啦！

然后，我们又会考虑到一个问题，因为我们现在修改字重是通过，将原来的【font-weight: 700】 改成【font-family: 'SourceHanSansCN-bold'】对应字体这种方式实现的。

那么，如果项目前期一直使用的是【font-weight】来设置字重，后期全部调整成【font-family】设置字体的话，需要修改的地方会很多很杂。

那有没有什么方法，在保留原有字重的情况下实现呢，即通过设置字重来自动引入对应所需要的字重字体呢？答案肯定的，这也是接下来需要重点讲解的内容。

首先引入所需的字体包

@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/light/light.eot");/* IE9 */src: url("./fonts/webFonts/test/light/light.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/light/light.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/light/light.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/light/light.svg#.PhoneFallback") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/regular/regular.eot");/* IE9 */src: url("./fonts/webFonts/test/regular/regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/regular/regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/regular/regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/regular/regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 400;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 500;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}

这里我们看到引入的字体包的名称是一致的，而不是像上一段那样不同字体命名不同，但是字重不一样了，需要特别关注的是

@font-face {font-family: "test-font";/* 通过字重实现自动引入对应字体 */font-weight: 700;
}

我们可以通过 @font-face 中的 font-weight 属性来设置命中该字体包的字重大小，只要页面设置的字重和该字体包重，即可命中并引入该字体包。
 /* 通过字重实现自动引入对应字体 */
 font-weight: 700;

<div class="font-container page-container"><p class="font-css light">测试字体abcde12345</p><p class="font-css regular">测试字体abcde12345</p><p class="font-css medium">测试字体abcde12345</p><p class="font-css bold">测试字体abcde12345</p>
</div>
.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'test-font';&.light {font-weight: 300;}&.regular {font-weight: 400;}&.medium {font-weight: 500;}&.bold {font-weight: 700;}
}

效果如下:

我们再来看一下字体引入情况

OK，的确只引入了700情况下的自定义字体包，效果Perfect！！！！！

好了，抬走下一个

通常情况下，我们字体会遇到中文，中文字符，英文，英文字符，数字等等情况，那我们怎么给不同的语言设置不同的字体呢。

那就有人会说了：“给不同语言设置不同字体不就好了，中文设置中文字体，英文设置英文字体。”

那么，问题来了，如果一个p标签，span标签里的内容，你无法识别，即既可能会是中文也可能是英文也可能是中英文混合，哪怎么办呢？

又有人会说了：“那我们就不做区分，直接给这块内容同时设置中英字体不就好了，哪个生效用哪个。”

的确，之前我也是这么想的，也是这么做的。然后又遇到问题了，如果项目提供的字体（不论中文字体还会英文字体）对中英文都生效怎么办，这时候又达不到项目想要的效果了。

通过搜索查找，终于找到了解决办法，使用【unicode-range】设置字符 unicode 范围，从而自定义字体包。

【unicode-range】 是一个 CSS 属性，用于指定字体文件所支持的 Unicode 字符范围，以便在显示文本时选择适合的字体。

它的语法如下：

@font-face {font-family: "test-font-cn";src: url("./fonts/webFonts/test/medium/medium.ttf") format("truetype");unicode-range: U+4E00-9FFF, U+3000-303F, U+2000-206F;
}

然后我的想法是对中文以及中文字符进行字符限制从而达到效果。

通过 chatgpt 我得知到中文、中符号的 unicode 的范围为： U+4E00-9FFF, U+3000-303F, U+2000-206F 这么几个区间。

详细代码如下：

@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}/* 中文字体包 */
@font-face {font-family: "test-font-cn";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;unicode-range: U+4E00-9FFF, U+3000-303F, U+2000-206F;/* 中文范围 */
}/* 英文字体包 */
@font-face {font-family: "test-font-en";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}
<div class="font-container page-container"><p class="font-css cn">测试字体abcde12345</p><p class="font-css en">测试字体abcde12345</p><p class="font-css cnen">测试字体abcde12345</p>
</div>
.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'test-font';&.cn {font-weight: 500;}&.en {font-weight: 700;}&.cnen {font-family: 'test-font-cn', 'test-font-en';}
}

效果如下：

到此，我项目中遇到关于字体包的问题解决了.

BINGO！！！

总结：

1、项目引入自定义字体包  【解决】

2、不同模块设置不同自重 【解决】

        2-1 通过font-weight简单设置

        2-2 引入不同自重字体包并使用

        2-3 通过设置font-weight按需自动引入不同自重字体包

3、不同言语字符设置不同字体包【解决】

        3-1 通过设置unicode-range按需自动引入不同语言字体包

参看资料：

什么！一个项目给了8个字体包？？？icon-default.png?t=N7T8https://juejin.cn/post/7251884086536781880CSS unicode-range特定字符使用font-face自定义字体icon-default.png?t=N7T8https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/

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

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

相关文章

异常处理(黑马学习笔记)

异常处理(黑马学习笔记)

当前问题 登录功能和登录校验功能我们都实现了&#xff0c;下面我们学习下今天最后一块技术点&#xff1a;异常处理。首先我们先来看一下系统出现异常之后会发生什么现象&#xff0c;再来介绍异常处理的方案。 我们打开浏览器&#xff0c;访问系统中的新增部门操作&#xff0…
阅读更多...
模型优化_如何提高网络/模型的泛化能力？(全面)

模型优化_如何提高网络/模型的泛化能力？(全面)

目录 1. 以数据为中心的泛化方法 1.1 使用更多数据 1.2 做好数据预处理 特征工程 1.3 数据增强 1.4 调整数据分布 2. 以模型为中心的泛化方法 2.1 使用更大批次 超参数调优 2.2 调整目标函数 2.3 调整网络结构 2.4 屏蔽网络节点 2.5 权值正则化 2.6 偏差-方差权衡…
阅读更多...
全国夜间灯光指数数据、GDP密度分布、人口密度分布、土地利用数据、降雨量数据

全国夜间灯光指数数据、GDP密度分布、人口密度分布、土地利用数据、降雨量数据

引言 DMSP/OLS的1992-2013年全球遥感影像&#xff0c;包括三种非辐射定标的夜间灯光影像。三种全年平均影像分别是&#xff1a;无云观测频数影像、平均灯光影像和稳定灯光影像。目前地理遥感生态网可提供全国稳定灯光影像免费下载。稳定灯光影像是标定夜间平均灯光强度的年度栅…
阅读更多...
【论文阅读笔记】Explicit Visual Prompting for Low-Level Structure Segmentations

【论文阅读笔记】Explicit Visual Prompting for Low-Level Structure Segmentations

1.介绍 Explicit Visual Prompting for Low-Level Structure Segmentations 低级结构分割的显式视觉提示 2023年发表在IEEE CVPR Paper Code 2.摘要 检测图像中低级结构&#xff08;低层特征&#xff09;一般包括分割操纵部分、识别失焦像素、分离阴影区域和检测隐藏对象。虽…
阅读更多...
人造太阳光热模拟能量密度太阳模拟器

人造太阳光热模拟能量密度太阳模拟器

人造太阳模拟器其他名称&#xff1a;能量密度太阳能光热模拟能量密度太阳模拟器、能流密度太阳光模拟器、高通量太阳模拟器 高通量能留密度太阳能炉和太阳光模拟器产生高度集中的太阳能和人造光&#xff0c;用于新技术和材料的研究和测试。这使研究人员能够进行制氢实验、太阳…
阅读更多...
备战蓝桥杯---线段树基础1

备战蓝桥杯---线段树基础1

引入&#xff1a;RMQ问题&#xff1a; 什么是RMQ&#xff1f; 显然&#xff0c;我们无法用前缀维护&#xff0c;因此&#xff0c;我们需要用到线段树的知识&#xff1a; 什么是线段树&#xff1f; 线段树是用一种树状结构存储一个连续区间信息的数据结构 下面我们用图解释用…
阅读更多...
【数据结构】队列OJ题《用队列实现栈》（题库+解析+代码）

【数据结构】队列OJ题《用队列实现栈》（题库+解析+代码）

1.前言 通过前面队列的实现和详解大家对队列应该有一定熟悉了&#xff0c;现在上强度开始做题吧 队列详解&#xff1a;http://t.csdnimg.cn/dvTsW 2.OJ题目训练225. 用队列实现栈 题目分析 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0…
阅读更多...
【GPU驱动开发】- AST简介

【GPU驱动开发】- AST简介

前言 不必害怕未知&#xff0c;无需恐惧犯错&#xff0c;做一个Creator&#xff01; AST&#xff0c;抽象语法树&#xff0c;是一种包含丰富语义信息的格式&#xff0c;其中包括类型、表达式树和符号等。 TranslationUnitDecl&#xff1a;该类表示一个输入源文件 ASTContext&…
阅读更多...
Qt注册类对象单例与单类型区别

Qt注册类对象单例与单类型区别

1.实现类型SingletonTypeExample #ifndef SINGLETONTYPEEXAMPLE_H #define SINGLETONTYPEEXAMPLE_H#include <QObject>class SingletonTypeExample : public QObject {Q_OBJECT public://只能显示构造类对象explicit SingletonTypeExample(QObject *parent nullptr);//…
阅读更多...
【学习笔记】深度学习实战 | LeNet

【学习笔记】深度学习实战 | LeNet

简要声明 学习相关网址 [双语字幕]吴恩达深度学习deeplearning.aiPapers With CodeDatasets 深度学习网络基于PyTorch学习架构&#xff0c;代码测试可跑。本学习笔记单纯是为了能对学到的内容有更深入的理解&#xff0c;如果有错误的地方&#xff0c;恳请包容和指正。 参考文献…
阅读更多...
KubeEdge 边缘计算

KubeEdge 边缘计算

文章目录 1.KubeEdge2.KubeEdge 特点3.KubeEdge 组成4.KubeEdge 架构 KubeEdge # KubeEdgehttps://iothub.org.cn/docs/kubeedge/ https://iothub.org.cn/docs/kubeedge/kubeedge-summary/1.KubeEdge KubeEdge 是一个开源的系统&#xff0c;可将本机容器化应用编排和管理扩展…
阅读更多...
蓝牙耳机和笔记本电脑配对连接上了，播放设备里没有显示蓝牙耳机这个设备，选不了输出设备

蓝牙耳机和笔记本电脑配对连接上了，播放设备里没有显示蓝牙耳机这个设备，选不了输出设备

环境&#xff1a; WIN10 杂牌蓝牙耳机6s 问题描述&#xff1a; 蓝牙耳机和笔记本电脑配对连接上了&#xff0c;播放设备里没有显示蓝牙耳机这个设备&#xff0c;选不了输出设备 解决方案&#xff1a; 1.打开设备和打印机&#xff0c;找到这个设备 2.选中这个设备&#…
阅读更多...
Linux下gcc编译常用命令详解

Linux下gcc编译常用命令详解

在Linux环境下&#xff0c;使用gcc编译器进行源代码的编译是程序员日常工作的一部分。本篇将介绍一些常用的gcc编译命令&#xff0c;帮助开发者更好地理解和使用这些命令。 1. 基本编译命令 gcc工作流程&#xff1a; 编译单个源文件 gcc source.c -o output这个命令将sour…
阅读更多...
调试工具vue,react,redux

调试工具vue,react,redux

React Developer Tools Redux DevTools Vue devtools 使用浏览器官方组件扩展搜索安装
阅读更多...
枚举和联合（共用体）

枚举和联合（共用体）

目录 枚举枚举类型的定义枚举的优点 联合&#xff08;共用体&#xff09;联合类型的定义联合的特点联合大小的计算 枚举 枚举顾名思义就是一一列举&#xff0c;把可能的取值一一列举 枚举类型的定义 enum Day &#xff0c; enum Sex &#xff0c;enum Color 都是枚举类型{}中…
阅读更多...
曾桂华:车载座舱音频体验探究与思考| 演讲嘉宾公布

曾桂华:车载座舱音频体验探究与思考| 演讲嘉宾公布

智能车载音频 I 分论坛将于3月27日同期举办&#xff01; 我们正站在一个前所未有的科技革新的交汇点上&#xff0c;重塑我们出行体验的变革正在悄然发生。当人工智能的磅礴力量与车载音频相交融&#xff0c;智慧、便捷与未来的探索之旅正式扬帆起航。 在驾驶的旅途中&#xff0…
阅读更多...
通过css修改video标签的原生样式

通过css修改video标签的原生样式

通过css修改video标签的原生样式 描述实现结果 描述 修改video标签的原生样式 实现 在控制台中打开设置&#xff0c;勾选显示用户代理 shadow DOM&#xff0c;就可以审查video标签的内部样式了 箭头处标出来的就是shodow DOM的内容&#xff0c;这些内容正常不可见的&#x…
阅读更多...
MySQL 用了哪种默认隔离级别，实现原理是什么？

MySQL 用了哪种默认隔离级别，实现原理是什么？

MySQL 的默认隔离级别是 RR - 可重复读&#xff0c;可以通过命令来查看 MySQL 中的默认隔离级别。 RR - 可重复读是基于多版本并发控制&#xff08;Multi-Version Concurrency Control&#xff0c;MVCC &#xff09;实现的。MVCC&#xff0c;在读取数据时通过一种类似快照的方…
阅读更多...
视觉三维重建colmap框架的现状与未来

视觉三维重建colmap框架的现状与未来

注&#xff1a;该文章首发3D视觉工坊&#xff0c;链接如下3D视觉工坊 前言 众所周知&#xff0c;三维重建的发展已经进入了稳定期&#xff0c;尤其是离线方案的发展几乎处于停滞期&#xff0c;在各大论刊上也很少见到传统sfmmvs亮眼的文章。这也不难理解&#xff0c;传统的多视…
阅读更多...
MYSQL 解释器小记

MYSQL 解释器小记

解释器的结果通常通过上述表格展示&#xff1a; 1. select_type 表示查询的类型 simple: 表示简单的选择查询&#xff0c;没有子查询或连接操作 primary:表示主查询&#xff0c;通常是最外层的查询 subquery :表示子查询&#xff0c;在主查询中嵌套的查询 derived: 表示派…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023