CSS 样式会减慢浏览器的速度

Question

我有一个样式表(CSS(，可以减慢浏览器的速度(渲染(。我尝试使用 css 压缩器，但结果是一样的，原始文件重 1120 字节，压缩 810 字节，但压缩文件仍然会降低浏览器的速度。

我该如何解决这个问题？ 这是我的 css 代码：

.logo {
position: fixed;
top: 20px;
left: 36%;
z-index: 4000;
}
@font-face {
font-family: DaZPlayer;
src: url(DaZPlayer.ttf);
}
.logo b{
font-family: 'DaZPlayer';
font-size: 4.3rem;
color: #fff;
text-shadow: 0 -40px 300px, 0 0 2px, 0 0 1em #f4f4f4, 0 0 0.5em #f4f4f4, 0 0 0.1em #f4f4f4, 0 10px 3px #000;
}
@media all and (max-width: 1067px){
.logo b{
font-size: 3.5rem;
}
}
@media all and (max-width: 920px){
.logo b{
font-size: 3rem;
}
}
@media all and (max-width: 664px){
.logo b{
font-size: 1.9rem;
}
}
@media all and (max-width: 400px){
.logo b{
font-size: 1.5rem;
}
}

.logo b span{
animation: blink linear infinite 2s;
}
@keyframes blink {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}

如果有人能帮助我，我会很感激， 关于迪克斯。

Answer 1

您是否尝试过为此使用预处理器？您可以使用 CSS 缩小器。还有一个提示，使用Google页面见解，它会准确地告诉您需要做什么。

Answer 2

你有没有尝试过缩小它？这是您的代码缩小。

.logo{position:fixed;top:20px;left:36%;z-index:4000}@font-face{font-family:DaZPlayer;src:url(DaZPlayer.ttf)}.logo b{font-family:DaZPlayer;font-size:4.3rem;color:#fff;text-shadow:0 -40px 300px,0 0 2px,0 0 1em #f4f4f4,0 0 .5em #f4f4f4,0 0 .1em #f4f4f4,0 10px 3px #000}@media all and (max-width:1067px){.logo b{font-size:3.5rem}}@media all and (max-width:920px){.logo b{font-size:3rem}}@media all and (max-width:664px){.logo b{font-size:1.9rem}}@media all and (max-width:400px){.logo b{font-size:1.5rem}}.logo b span{animation:blink linear infinite 2s}@keyframes blink{78%,81%,83%,92.5%{color:inherit;text-shadow:inherit}79%{color:#333}80%{text-shadow:none}82%,92%{color:#333;text-shadow:none}}