控制网页设计排版的CSS字体显示[北京网站设计制作]

用不同的方式来告诉浏览器如何加载Web字体。加载自定义网页设计字体,第一次招一个网页设计制作上的性能损失。作为Web开发人员和网站设计师,总是努力创造美丽和高性能的网页设计制作。但是,往往这两个目标发生冲突。CSS属性的字体显示使美学和性能之间取得更好的平衡... 

用不同的方式来告诉浏览器如何加载Web字体。

北京网站设计

相关阅读:如何创建一个良好的网站设计欣赏平台[北京网站设计]

加载自定义网页设计字体,第一次招一个网页设计制作上的性能损失。作为Web开发人员网站设计师,总是努力创造美丽和高性能的网页设计制作。但是,往往这两个目标发生冲突。CSS属性的字体显示使美学和性能之间取得更好的平衡。 

随着网页设计制作的字体的显示,您可以给您的浏览器提示要使用的字体加载策略-例如,您的Web字体的重要性,以及如何系统字体回退,应在您的Web字体下载时间过长的情况下使用。您可以添加字体显示属性为您@字体面的规则。

@font-face {

 font-family: ‘My-Custom-Font’;

 font-display: fallback;

}

1. 倒退

如果您指定的字体显示的属性值回退时,浏览器会等待一秒钟的自定义Web字体下载少。如果自定义字体不是由这个时间准备就绪,一回退(该属性值的因此而得名)将用于该网页设计制作的寿命。这是伟大的用户,因为他们不会在“空白”文本盯着很长时间。 

当然,美中不足的,那是您闪亮的Web字体将不被用于初始页面加载,这可能影响您的外观和感觉的网页设计制作。字体显示:回退是非常严格的:如果您的Web字体完成的最后期限后下载,它仍然不会被使用。 

北京网站设计制作

相关阅读:网站设计构建转换在线投资组合的精妙提示[北京网站制作]

2. 交换

如果您的自定义Web字体是您的网站设计很重要的部分,有可能是您更好的选择。字体显示:交换将立即使用备用字体。在这一点上,只要您的Web字体下载完成后,浏览器将交换回退字体与所需的Web字体。值得注意的是,虽然该字体交换可不和谐的用户,特别是如果他们已经专注于阅读的文本。

3.

最后,如果您决定您的Web字体是高度重视的字体显示:块可能是一个选项。这暗示给浏览器应该等待相当长的一段时间(一般为三秒)来下载字体。在此期间,用户将不会看到任何文字。这三秒钟后,使用回退。 

从这一点来说,不管Web字体需要多长时间来下载,浏览器仍然会交换新下载的字体与后备字体,即使用户已经开始滚动和阅读页面。

4. 我应该怎么使用?

如果感知性能是一个大问题,您是不是在自定义字体,太大惊小怪字体显示:后备提供了一个很好的用户体验。如果最终显示自定义Web字体很重要,那么交换或块可能是您。 

请记住,无论您去什么选项,在节流的连接测试这种行为是非常重要的。

 

建站行从事北京网站建设多年,有丰富的设计案例网站作品,请随时访问我公司网站:http://www.jianzhanhang.cn或拨打电话4008-626-737进行咨询,我们将竭诚为您服务!

建站行微信号:jianzhanhang