如果一个网站使用@fontface加载2个自定义字体,并且还使用ariel或sans-serif字体作为默认/备份字体,但两个字体的大小有很大的不同 – 如何解决如果@fontface发生的布局问题字体不加载？
问题是@fontface字体占用的空间比默认的ariel字体少.所以如果标题的大小为45px,而@fontface的字体在div中完美载入.但是,如果@fontface字体没有及时加载,则默认字体加载(以45px为单位),而ariel正在占用div的更多空间,导致标题分解成2行,从而破坏布局.
那么我们如何控制BOTH @fontface样式和默认样式.理想情况下,我希望将h2 @fontface样式保持在45px,并强制将默认字体加载到相同h2样式的30像素.
解决方法
我建议使用Google
Web Font Loader,它为body元素添加额外的类,表示字体是否已经开始加载,加载完成,无法加载.使用这些主体类可以适当地调整字体样式.例如,如果@ font-face加载失败,您可以将字体系列设置为较小的后备字体.
