[css] 当使用@font-face的时候,为什么src中要加入local呢?

[css] 当使用@font-face的时候,为什么src中要加入local呢?

网上的说法片面不一,CSDN和掘金都没见到正确回复,然后我在MDN找到了比较明确的说法。MDN的   @font-face   这是一个CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。src
远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体,将会尝试其他来源,直到找到它。代码:@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
用到了用户本地字体"Helvetica Neue Bold"的备份;如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过),就会用下载的字体"MgOpenModernaBold.ttf"来代替。意味着加入local后,代码加载时会优先采用电脑资源,而不是从网络加载,这个可以加快加载速度,提升用户体验感。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

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

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

相关文章

Python爬虫自学之第(⑤)篇——爬取某宝商品信息

题外话: 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人,信不信未来的PI,了解一下,唯一一个高度与之持平的项目 能看到这里说明快进入动态网页爬取了,在这之前还有一两个知识点要了解&…

Vue通信、传值的多种方式,详解

Vue通信、传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等) this.…

[css] 你有使用过font-size-adjust属性吗?说说它的作用是什么?

[css] 你有使用过font-size-adjust属性吗?说说它的作用是什么? 很少用。 实际应用场景: 实际应用场景在指定字体时,出于安全考虑,人们通常会为一个元素指定多种字体,希望当首选字体不可用时,让…

Python代写CSSE1001/7030 python程序作业、代做python CSSE1001/7030程序作业、 代写CSSE1001/7030 python 作业...

Python代写CSSE1001/7030 python程序作业、代做python CSSE1001/7030程序作业、 代写CSSE1001/7030 python 作业UnoAssignment 2CSSE1001/7030Semester 2, 2018Version 1.0.110 marksDue Friday 21st September, 2018, 20:30IntroductionThis assignment follows a programming…

selenium等待定位标签加载完再执行

遇到的问题描述 我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作。 否则页面上的元素不存在,会抛出异常。 比如: 一个动态网页使用了ajax的异步加载,我们需要等待元素加载…

[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?

[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父级,在缺少了父级的宽高之后,如果给body设置一个渐变色背景的话将不会正常显示。个…

数据类型的操作

时间数据类型 1.mongo中存储时间大多为ISOData 2.获取当前时间   1. 使用new Date() 自动生成当前时间   2. 使用 ISODate() 生成当前时间   3. 获取计算机时间生成时间格式字符串 Date() 3.ISODate()   功能: 生成mongodb时间存储类型   参数&#xff1a…

python+selenium 浏览器无界面模式运行

以Chrome浏览器为例: 方法一: from selenium.webdriver import Chrome, ChromeOptionsopt ChromeOptions() # 创建Chrome参数对象 opt.headless True # 把Chrome设置成可视化无界面模式,windows/Linux 皆可 driv…

[css] 你所理解的css高级技巧有哪些?

[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣…

[css] 举例说明跟字体相关的属性有哪些

[css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色 等等个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很…

python 文件读写(追加、覆盖)

很明了的一个常用参数图标: 更像细的一个参数说明: 由于文件读写时都有可能产生IOError,一旦出错,后面的f.close()就不会调用。所以,为了保证无论是否出错都能正确地关闭文件,我们可以使用try ... finally来…

职场篇:失败之后

前言 当我写下这个题目之后,我想到了一首歌词"长大以后,我只能奔跑,我多害怕 黑暗中跌倒 ",我不由得哼起这首歌,一种心痛孜然而生。 我也想到了一本小说《飞升之后》,讲述主人公飞升后&#xf…

h5页面调用cmd命令并隐藏cmd弹窗

/*** 通过js调用cmd命令利用ffmpeg实现录屏或者录像功能 ***/ var cmd new ActiveXObject("WScript.Shell");/*命令参数说明cmd.exe /c dir 是执行完dir命令后关闭命令窗口。cmd.exe /k dir 是执行完dir命令后不关闭命令窗口。cmd.exe /c start dir 会打开一个新窗…

[css] 字体的粗细的属性是用哪一个?它有哪些属性值?

[css] 字体的粗细的属性是用哪一个?它有哪些属性值? font-size指的应该是字体大小,字体粗细应该是font-weight,值有normal,bold,bolder,lighter,inherit,也可以自己定义100~900之间的某一个值个人简介 我是歌谣,欢迎…

前端知识点总结

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。(通俗易懂的来讲讲DOM、两个节点之间可能存在哪些关系以及如何在节点之间任意移动) DOM: Document Object Module, 文档对象模型。 节点的关系:父(parent)、子(child)和同胞(sibling)等节…

C# windows定时服务+服务邮箱发送

protected override void OnStart(string[] args){timer1 new System.Timers.Timer();// timer1 new System.Timers.Timer(24 * 60 * 60 * 1000);timer1.Interval 3000; //设置计时器事件间隔执行时间timer1.Elapsed new System.Timers.ElapsedEventHandler(timer1_Elapse…

[css] 用CSS实现一个轮播图

[css] 用CSS实现一个轮播图 使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做。个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

Python爬虫自学之第(①)篇——爬虫伪装和反“反爬”

有些网站是防爬虫的。其实事实是,凡是有一定规模的网站,大公司的网站,或是盈利性质比较强的网站,都是有高级的防爬措施的。总的来说有两种反爬策略,要么验证身份,把虫子踩死在门口;要么在网站植…

[css] 用CSS实现tab切换

[css] 用CSS实现tab切换 1.用label结合单选按钮radio接受切换tab的单击 2.用zindex层级来显示当前tab页对应的内容 3.用css兄弟选择器选中对应的tab页签和内容页,添加相应的样式个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易&#xff0…

【练习】实现一个parse方法(需要实现的效果见内容),方法总结

【本题来自牛客网,解题方法也借鉴于牛客网上讨论区中的多种答案,在此做一个总结】 parse方法需要实现的效果如下: var object {b: { c: 4 }, d: [{ e: 5 }, { e: 6 }] }; console.log( parse(object, ‘b.c’) 4 ) //true console.log( par…