如果一个网站使用@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加载失败,您可以将字体系列设置为较小的后备字体.
原文地址：https://www.jb51.cc/css/217360.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
