gpt4 book ai didi

css - 如何解决闪烁的 Font Awesome 图标?

转载 作者:太空狗 更新时间:2023-10-29 12:24:02 25 4
gpt4 key购买 nike

如果我使用到处都推荐的东西 - 使用 CDN 附件作为“Font Awesome”每次都在“页面加载时”闪烁。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Q如何防止闪烁?

最佳答案

我的解决方案是添加 @font-face直接在 <head>标签:

<!DOCTYPE html>
<html lang="en">
<head>
<style name="FontAwesome">
@font-face {
font-family: 'FontAwesome';
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot');
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2') format('woff2'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff') format('woff'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf') format('truetype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css}" rel="stylesheet">

这就是 Google 在 Youtube 和其他网站上所做的

关于css - 如何解决闪烁的 Font Awesome 图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36705964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com