我应该使用Google字体库中的字体系列Nunito
[»]。
由于一些改进,例如站点速度性能和诸如独立性的问题,我需要在本地运行此技术。
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
我为此使用了此工具:google-webfonts-helper
[»]
我对浏览器的最低支持(现代浏览器)为IE9+
。在这种情况下,当我从工具中选择该选项时,它将显示以下@font-face
块。
/* nunito-regular - latin-ext_latin_cyrillic */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/nunito-v12-latin-ext_latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
由于项目的开放速度是我们的主要目标,因此请牢记一些问题。
如您所见,此代码尝试同时加载woff
和woff2
字体。我想到的是,既然包含了woff
,为什么还要尝试包含woff2
?
包括所有现代浏览器(IE9 +)的woff
型字体集是否足够?
最后,我了解到基于IOS操作系统的设备使用ttf
型字体。实际上,当我仅使用woff
时,最低的IOS支持是什么?
woff2是现代的“标准字体”,并且在现代浏览器中受支持。 Woff2是压缩程度更高的字体,因此woff2文件比woff文件小。为了支持现代和一些旧的浏览器,必须同时安装woff2和woff。优先级是首先显示Woff2,然后显示woff字体。
如果您看表演,woff2是最好的选择。
请注意,不会同时加载woff2和woff。如果支持woff2,则浏览器将仅加载woff2。另一方面,如果不支持woff2,则仅加载woff。