html字体置顶,2020年应使用的3种CSS字体属性
原标题:2020年应使用的3种CSS字体属性
来源 | dev.to/nickbulljs
译者 | 鬼哥
如果您使用具有不同字体粗细的非系统字体,则字体文件的大小将很大。浏览器将需要更多时间来下载它们。这会给你带来两个思考:
浏览器可以隐藏文本,直到下载自定义字体为止。此问题称为“看不见的文字闪烁”或FOIT。浏览器可以显示默认系统字体,直到下载自定义字体为止。这称为“未样式化文本的闪烁”或FOUT。这样可使网页加载速度更快,但会破坏用户体验。
您可能会想,“这又有什么问题?只是几秒钟而已。至少用户可以看到一些东西,对吗?” 但是,如果用户网络速度很慢且字体需要数十秒才能下载,会发生什么呢?或者,如果字体根本没有加载呢?用户体验必然就差了。
但是不用担心。可以防止这种损坏。
❝
CSS具有三个属性,可帮助优化您网站上的自定义字体。
❞
1.font-display
该属性定义浏览器如何加载和显示字体文件。
font-display 属性接受五个值:
auto (默认):允许浏览器使用其默认方法进行加载。通常表现为block属性。
block :浏览器将隐藏文本,直到完全下载字体为止。浏览器使用不可见的占位符绘制文本(文本不可见),然后在加载后立即将其与自定义字体替换。您会得到一个FOIT(不可见文本的闪烁)。
swap :浏览器使用后备字体显示文本,直到完全下载自定义字体为止。没有封锁期。文本立即显示。您将得到一个FOUT(无样式文本的闪烁)。
fallback :充当auto和swap值之间的折衷。浏览器将文本隐藏大约100毫秒,如果尚未下载字体,则浏览器将使用后备文本。下载后,它将交换为新字体,但仅在很短的交换期内(可能为三秒钟)。
optional :但是,此值还允许浏览器使用用户的连接速度作为确定因素来确定是否甚至使用了自定义字体,从而较慢的连接不太可能接收到自定义字体。
那到底使用什么呢?
对于主体文本,请使用 optional 。用户将获得快速的内容,并且如果 Web 字体下载花费的时间太长,他们在阅读您的文章的一半时将不会得到页面的重新布局。
浏览器支持度 90.49%
2.text-rendering
该属性向渲染引擎提供有关在渲染文本时要进行哪些优化的信息。
这是在任何CSS标准中都未定义的SVG属性。但是,通过Gecko和WebKit浏览器,您可以将此属性应用于Windows,macOS和Linux上的HTML和XML内容。
text-rendering 属性仅适用于Windows和Linux。
text-rendering 几个有效值:
auto :浏览器会做出有根据的猜测,以决定何时在绘制文本时针对速度,清晰度和几何精度进行优化。
optimizeSpeed :浏览器在绘制文本时强调渲染速度,而不是清晰度和几何精度。它禁用字距调整和连字,有时会关闭抗锯齿功能。(在排版中,字距调整是调整比例字体中字符之间的间距的过程,通常可实现视觉上令人满意的效果)
optimizeLegibility :浏览器强调渲染速度和几何精度方面的可读性。这样可以启用字距调整和可选连字,并且通常应用抗锯齿或字体提示来显示最清晰的文本。
geometricPrecision :浏览器在渲染速度和可读性上强调几何精度。通常,此选项使浏览器不使用提示。
那到底使用什么呢?
这里没有明确的建议。如果您查看大型网站的源代码,则会看到它们使用 optimizeLegibility 。
浏览器支持度 90.16%
3.font-smooth
font-smooth 属性控制渲染时的字体抗锯齿。
font-smooth 目前不在标准轨道上,仅在 macOSX 平台上有效。未经仔细考虑,不应使用它。
WebKit中的可选值
auto :让浏览器决定。如果可用,通常会使用亚像素抗锯齿功能。
none :关闭字体平滑。显示带有锯齿状尖锐边缘的文本。
antialiased :在子像素(而不是子像素)的水平上使字体平滑。从亚像素渲染切换为深色背景上的浅色文本的抗锯齿功能,使其看起来更亮。
subpixel-antialiased :在大多数非视网膜显示器上,这将给出最清晰的文本。
Firefox中的可选值
auto :允许浏览器选择一种优化字体平滑的方法,通常是 grayscale 。
grayscale :使用灰度抗锯齿效果渲染文本,而不是子像素。从亚像素渲染切换为深色背景上的浅色文本的抗锯齿功能,使其看起来更亮。类似于 WebKit antialiased 。
那到底使用什么呢?
尝试尝试字体平滑。它可能对内容的可读性有很大的影响。大型网站经常使用 antialiased 和 grayscale 。但这通常会导致文本太细,权重较小。
浏览器支持度 93.16%
1.如果看到这里,说明你喜欢这篇文章, 请转发 、点赞 、在看 同时标星(置顶)
2.关注公众号前端人,回复 资料包 领取我整理的前端进阶资料包
3.回复 加群 ,加入前端进阶群,和小伙伴一起学习讨论! 返回搜狐,查看更多
责任编辑:
html字体置顶,2020年应使用的3种CSS字体属性相关推荐
- java excel 字体_Java 在Excel单元格中应用一种/多种字体样式(实例代码)
在Excel表格中,设置单元格字体样式时,可以对单元格内的所有字符应用同一样式,即获取指定单元,应用样式即可:另外也可以对单元格内的不同字符内容应用不同字体样式,即获取单元格中的字符位置,应用样式:本 ...
- 置顶 | 2020学习单/读书单(顺境做事,逆境读书)
2019年的计划执行得不错:但2020年开局不好遇上个Coronavirus打乱了原先的安排,又经历了很多意料之外情理之中的糟心事.眼看生死有命富贵在天(谋事在人成事在天),焦虑迷茫了一个季度后,终于 ...
- [置顶] 深入浅出Javascript(三)创建自定义对象以及属性、方法
怎么样创建一个对象? 利用Object创建自定义对象 JavaScript能够自定义对象来扩展程序的功能,不仅如此,它还能扩展JavaScript提供的内置对象,新增内置对象的属性或方法 例如下面代码 ...
- java excel 字体_Java 在Excel单元格中应用一种/多种字体样式
在Excel表格中,设置单元格字体样式时,可以对单元格内的所有字符应用同一样式,即获取指定单元,应用样式即可:另外也可以对单元格内的不同字符内容应用不同字体样式,即获取单元格中的字符位置,应用样式:本 ...
- WinForm始终置顶并获取焦点
使一个Winform始终置顶很简单,只要将这个Form的TopMost属性设置为True即可,但是强制让其获取焦点就比较麻烦了. 最开始的想法在Deactivate事件(Form处于非活动状态时)中, ...
- 小程序开发API之改变置顶栏文字内容 wx.setTopBarText(已停,只有旧版微信有效)
效果展示: wx.setTopBarText(Object object) 动态设置置顶栏文字内容.只有当前小程序被置顶时能生效,如果当前小程序没有被置顶,也能调用成功,但是不会立即生效,只有在用户将 ...
- ag-grid 学习笔记三:ag-grid设置(定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序)
目录 一 定义列 二 选择行 三 设置复选框 四 设置行高列宽 五 置顶合计行 六 底部合计行 七 行组 八 客户端排序 一 定义列 表格的列有如下常用属性. 名称 说明 headerName 显示的 ...
- word 编辑过程中变为只读_Word字体无法更改设置不起作用的几种情况
Word字体无法更改设置不起作用的几种情况 在编辑文档的过程中,时不时就会碰到word设置字体后,文本没有反应,设置不起作用,设置不了的情况.无论是通过字体对话框.样式对话框.直接在字体功能区点,还是 ...
- html设置字体比12还小,css字体更小 css比12px更小的方法
css 字间距.CSS字体间距.css 字符间距设置 1.text-indent设置抬头距离css缩进 2.letter-spacing来设置字与字间距_字符间距离,字体间距css样式 CSS 字体( ...
最新文章
- com.mchange.v2.resourcepool.BasicResourcePool$AcquireTask@4e47db1f -- Acquisition Attempt Failed!!!
- 安全领域新概念:安全评级服务的兴起
- 在github上面下载文件夹的方法666
- Windows下,启动Redis闪退 问题解决方案
- when click one item in table Select at least one column to perform the search
- 过渡效果_剪映教程:剪映怎么添加视频之间的过渡转场效果?
- 电脑桌面归纳小窗口_电脑一分钟小技巧:如何将电脑设置为定时关机?
- HTML、CSS、JS对unicode字符的不同处理
- python acme_使用 acme-tiny 工具生成 Let's Encrypt 的免费 SSL 证书
- 【渝粤教育】国家开放大学2019年春季 2633轨道交通信号与通信系统 参考试题
- 炮灰模型:对女生选择追求者的数学模型的建立-转
- 海思Hi3531DV100开发环境搭建
- 广义表的概念及其存储结构
- MEMORY系列之“DDR概述”
- Whole Word Masking (wwm) BERT PaddlePaddle常用预训练模型加载
- 笔记本怎么做wifi热点(xp版)
- Cognos 8.3 IE 兼容性问题
- 程序员的浪漫情诗,您学会了吗?
- 考研计算机冷门学校,考研5个冷门的985院校 别随大流,这些几所也是很不错的...
- 二进制数字频带传输2DPSK系统的设计
热门文章
- net start mysql 失败_net start mysql出错,显示错误1067
- python实现文件转数组
- c语言学习-对一个百分制的成绩给出相应的等级(如90分以上A,80分以上B等
- api返回的数据结构_JavaScript中的数据结构数组 和 栈
- 容器入门(5)- 在Registry之间复制镜像
- 围绕sqlite构建一个简单的Typescript ORM
- 官宣!vue.ant.design 低调上线
- 深入理解计算机系统第四版_《深入理解计算机系统》读书笔记 —— 第一章 计算机系统漫游...
- 函数扩展(函数拦截)
- uuid重复_0519-如何解决Cloudera Manager主机页面出现重复主机异常