首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

材料设计图标闪烁(FOUT?)

FOUT (Flash of Unstyled Text)是指在网页加载过程中,由于字体文件加载较慢,导致页面上的文本内容在一开始显示时没有应用所需的字体样式,而是显示为默认字体,然后在字体文件加载完成后突然发生闪烁,变成所需的字体样式。

FOUT的出现是因为在网页中使用了自定义字体,而自定义字体需要通过网络加载字体文件。当浏览器开始渲染页面时,如果字体文件还未加载完成,浏览器会先使用默认字体进行显示,当字体文件加载完成后,浏览器会重新渲染页面,将文本内容应用正确的字体样式,这个过程就会导致FOUT的出现。

为了解决FOUT问题,可以采用以下几种方法:

  1. 使用系统默认字体作为备选字体:在CSS样式中设置字体栈,将自定义字体放在最后,这样即使自定义字体未加载完成,页面也会先使用系统默认字体进行显示,避免了FOUT的出现。
  2. 使用字体加载器:字体加载器是一种JavaScript库,可以在字体加载完成之前隐藏文本内容,直到字体加载完成后再显示,从而避免了FOUT的出现。
  3. 使用字体预加载:在页面加载时,通过预加载字体文件,提前将字体文件下载到浏览器缓存中,这样在页面渲染时就能直接使用字体文件,避免了FOUT的出现。

腾讯云相关产品中,可以使用腾讯云字体库(Tencent Cloud Font Library)来解决FOUT问题。腾讯云字体库提供了丰富的字体资源,可以通过引入字体库的链接地址来加载字体文件,确保字体文件能够快速加载完成,避免FOUT的出现。

腾讯云字体库产品介绍链接地址:https://cloud.tencent.com/product/tcfl

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

文章目录 一、加载 Flutter 内置的图标 三、完整代码示例 三、相关资源 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) 一、加载 Flutter 内置的图标 ---- Flutter...中的图标组件 Icon , 专门用于显示图标 ; Flutter 中内置了一些默认图标 , 可以在 https://material.io/resources/icons/ 界面进行查询 ; 使用 Icon...组件加载 Flutter 内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 , import 'package:flutter/material.dart'; 使用 Icon 示例...: Center( // 加载 Flutter 内置图标 child: Icon(Icons.threed_rotation, size: 200,), ), 运行效果 : 三、完整代码示例...( 超长截图 | 材料设计图标完整展示 ) ---- Flutter 中内置的图标名称与下图中的大致类似 , 不完全一样 , 但基本名称差不多 ;

3K20

柔性复合材料新突破!河北大学研究团队利用创新 X 射线闪烁体开发 3 种新材料

目前绝大多数的闪烁材料都是在高温条件下煅烧合成的,不仅价格昂贵,而且难以在柔性基底上实现大面积制备。...种材料——具有辐射致发光特性的聚氨酯泡沫材料、可用于 X 射线成像柔性水凝胶闪烁体屏幕、用于多级防伪信息加密的复合水凝胶。...本研究提出了一种具有加密信息的三明治状多层水凝胶的设计,该水凝胶由两个外部非发光层 (Gel-0) 和一个内部信息层 (顺序:Gel-0/信息层/Gel-0) 组成。...同时,本研究也展示了粘土基纳米材料作为功能纳米粒子支撑的应用潜力。该研究成功拓展了X射线闪烁材料在柔性复合材料领域的应用,也为高分子复合材料的精细化和高附加值化发展提供了有力支持。...然而,目前核心部件的高性能闪烁材料绝大部分依靠进口。

12210
  • Android设计 - 图标设计概述(Iconography)

    2014-10-30 张云飞VIR 翻译自:https://developer.android.com/design/style/iconography.html Iconography 图标设计概述...当你为你的app设计图标时,重要的需要留下的是,你的app可能被安装在那些提供一个范围的像素密度的多种设备中,就像 Devices and Displays 中提到的那样。...因为你将为每个图标实现多个尺寸以支持多个不同的密度,下面的设计指南使用 dp 作为图标尺寸的 计量单位 ,它是以中等密度(MDPI)屏幕作为 像素尺寸的基础。 ?...设计提示 这里是一些你会发现的, 在你创建图标或者其他drawable资源对你的app有用的提示。...使用大纸板开始 因为你需要为不同的屏幕密度创建资源,最好在大的多倍于目标图标尺寸的纸板上开始你的图标设计

    1K00

    UI界面图标终极设计指南

    1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。...请注意,不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看,那就顺其自然让它们伸出来。...3 保持一定的图标细节 从一套图标中最复杂的那个开始来设计通常是最有效的,因为它会帮助我们定义相同的视觉重量,让所有的图标视觉重量保持一致。 ?...但是在你的最终设计稿里边,正确的,不扭曲的图标设计还是非常重要的。特别要注意,确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。 ?...静电杂谈:如何做一个“有特色”的UI设计师 交互工具哪个好用?来看看静电的具体分析~ 2019即将过半,UI设计师在激烈的从业环境如何提升 平面设计师如何快速转行UI设计行业?

    1K50

    UI图标终极设计指南

    它由 UI 图标、象形图和标志表示,并在各个领域中使用,因为它可以在占用小面积的情况下传达意义。 它受到许多设计师的喜爱,因为它比其他元素更容易赋予个性,并允许您尝试视觉原理。...在这篇文章中,我们总结了图标的属性以及UI设计中推荐的图标设计指南。 用法 在 UI 设计中,图标主要用作应用程序图标和系统图标。...它用于应用程序图标来表达您的品牌和系统图标,以便用户快速了解信息并根据信息采取行动。 风格 有线条、填充、彩色和图像方式来表达图标。目的因使用图标的空间而异,主要用于对动作进行反馈或增加注意力。...主要用于移动设备小区域的系统图标有时会以 4px 的倍数使用,以实现多功能性。 明晰 使用用户可以快速理解的最少元素进行设计。尽可能让用户友好,必要时应用简单的比喻。...视觉误差 由于图形设计工具的限制,有时需要进行视觉校正。对于下面的播放按钮,图形工具与图层末端对齐。但实际上,三角形需要调整,因为它们的重心与圆形或正方形不同。

    84810

    腾讯微云文件图标设计探索

    腾讯ISUX isux.tencent.com 社交用户体验设计 全文4000字,阅读需要15分钟。作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标设计由来。...设计风格受到PC操作系统影响 在早期,微云的文件图标设计源自PC客户端,很大程度上受到桌面操作系统的设计风格影响。这一阶段的图标从结构上可以分成三类: 1....对图标结构的主观分类导致对用户习惯多样性的包容降低,并且由于图标中包含了具体的文件类型后缀,导致设计师要针对每一个独立的文件格式输出数量庞大的设计资源。无形中增加了设计师的工作量。...最后,我们就得到了一套完整的图标方案。 组件化与资源输出 设计师除了要做好设计方案,如何提高后续的工作效率是我们常常忽略的。在日后的界面设计中,一定会用经常到文件图标。...这样能够保证所有界面设计图标的一致性,在图标有所调整时也能够及时覆盖到所有的设计稿。 最后我们和开发同学沟通一致后,为其提供1x的矢量设计资源(SVG或PDF)。

    2.8K40

    WebFont 三宗罪之一:WebFont 与 FOUT

    本文综合多篇文章来探讨WebFont 与 FOUT。...首先,神马是 FOUT FOUC,即无样式内容闪烁(Flash of Unstyled Content),指的是 Web 字体在下载并渲染之前,短暂显示无样式文本的情况。...按照许多旧文章的描述,FOUT 在IE 浏览器跟部分低版本Firefox 上会有,但Jeff 认为这是错误的——因为当我脑海中有写“WebFont 与 FOUT”的文章的想法,它就给我蹦出一个活生生的例子...将ISUX 作为本文的例子仅为解释FOUT 之用,无其他恶意成分(事实上ISUX 官方博客真心做的不错无论是设计还是内容本身)。 那么为什么会产生FOUT 呢?...FOUT 尽可能般的解决方案 针对FOUT,《Web 性能实践日志》提出了一些解决方案,在这里就直接援引之: 1、将字体文件(或者说援引的CSS)托管到CDN(内容分发网络)。

    1.5K70

    从iOS 11看怎样设计APP图标

    新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了新的图标。此次图标的变化势必也会激发下一个图标设计的潮流,如何设计图标又将成为一个新的热门话题。...在iOS历来的图标演变过程中,许多看似不明显的变化实际潜移默化中引导着图标设计风格和设计方法的演变。自iOS7开始,苹果图标设计采用扁平化风格并延续至今。...扁平化风格依旧是主流设计,那么如何设计一个好看、优雅的图标呢? ? 在设计或者绘制图标之前,首先要搞清楚图标到底是什么,为什么要画图标等等。 1.图标是什么?...而设计师在图标设计中要尽量放大图标之间的差异性,减弱图标之间的相似性,突出产品的独特之处。 ?...多掌握如何设计图标的理论基础和如何使用设计工具,多积累一些图标素材或者掌握一些像Mockplus这样自带图标库的设计工具,对自己的设计水平有更高层次的提升才是最重要的。

    1.7K30

    如何为移动应用设计出色的图标

    特别是一些需要基于应用程序进行创业的公司,图标设计直接关系到您在应用程序市场中的知名度。 本文将重点介绍Android和iOS应用程序的设计。我将总结设计中一些最重要的方面,例如外形尺寸和颜色选择。...颜色问题 为图标选一个合适的颜色是设计师面临的一大困难之一。尝试A / B测试来检查设计效果始终是一个不错的选择。这不仅适用于配色方案,而且适用于整个UI设计。...如何选择让用户过目不忘的颜色 这不仅是设计设计图标时的选择,还是品牌和营销决策。通常,您选择公司的公司颜色作为图标中的主要颜色,并且该颜色需要与您的总体营销策略和定位相匹配。...02.使用多变的形状设计图标 在iOS和安卓的设计手册中,它们都为我们制定了图标设计模板。一般情况下,Google希望设计师以原始的方式使用形状和颜色;而苹果更倾向于为应用设计标准化的图标。 ?...总结 设计优秀的图标并不是一件简单的事情。 图标设计的三个核心方面:配色方案,图标形状和形状。

    1.4K20

    UI界面图标终极设计指南

    静电说:今天静电看到了一篇非常棒的问题,详细阐释了图标设计过程中方方面面的知识点,今天,咱们就来看看设计师Slava Shestopalov的文章: 1 使用光栅来更好的设计图标 UI界面的图标通常可以近似的看做以下的基本格式之一...请注意,不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看,那就顺其自然让它们伸出来。...2 注意像素网格的重要性 在非视网膜屏幕上设计图形的时候,要特别遵循使用像素网格,并优先选用2像素的边框作为图标的线条。因为它可以让图标在这些显示屏上更加清晰。...3 保持一定的图标细节 从一套图标中最复杂的那个开始来设计通常是最有效的,因为它会帮助我们定义相同的视觉重量,让所有的图标视觉重量保持一致。...但是在你的最终设计稿里边,正确的,不扭曲的图标设计还是非常重要的。特别要注意,确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。

    88820

    设计分享|定时器Timer0控制LED灯闪烁

    电子工程师成长日记 51单片机定时器Timer0控制LED灯闪烁。...设计思路 文献研究法:搜集整理相关研究资料,阅读文献,为研究做准备; 调查研究法:通过调查、分析、具体实验等方法,发现相关存在问题和解决办法; 比较分析法:比较不同设计的具体原理,以及同一类传感器性能的区别...,分析系统的研究现状与发展前景; 软硬件设计法:通过软硬件设计实现硬件,最后测试各项功能是否满足要求。...单片机类设计论文参考模板: 毕设无忧|单片机类毕设论文模板 设计内容 仿真图(protues8.7) 本设计利用protues8.7软件实现仿真设计,具体如图。...软件实现程序设计

    17910
    领券