致青春,致梦想,一片自留地

Menu

重新开始使用Google云字体

前言

最近在琢磨怎么提高外贸站点的国外访客打开速度,那么自然就在现在网站的最减缓速度的地方开始动脑筋,自定义字体必须要修改

现有字体方案

使用的是@font-face的函数,调用网站自带的字体库

@font-face{font-family:pop-b;src:url(fonts/Poppins/Poppins-Bold.ttf) format("opentype");}
@font-face{font-family:pop-l;src:url(fonts/Poppins/Poppins-Light.ttf) format("opentype");}
@font-face{font-family:pop-m;src:url(fonts/Poppins/Poppins-Medium.ttf) format("opentype");}
@font-face{font-family:pop-r;src:url(fonts/Poppins/Poppins-Regular.ttf) format("opentype");} 
@font-face{font-family:pop-s;src:url(fonts/Poppins/Poppins-SemiBold.ttf) format("opentype");}

用了自定义的字体网站的确有些漂亮,但是庞大的网站字体库文件不但减缓了网页的加载速度,也提高了服务器的压力。

解决办法

想来想去还是得恢复成Google的云字体,只有这样才可能降低字体的加载速度。由于我网站的访客只有国外访客才有价值,因此不需要考虑Google字体被墙的事情。

第一步:到google的字体站点选择好需要的字体,并选择好需要的字体粗细,获取对应的代码,复制到网站css文件的开头处。

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap'); /* 使用Google云字体库中Poppins字体,需要使用到300,400,500,600,700等几种的字体粗细*/

第二步:在css文件中对字体根据不同的粗细完成自定义操作

.Poppinser{ font-family: 'Poppins', sans-serif; font-weight: Normal; /* 默认采用normal粗细 */ } 
.pop-l{ font-weight:300; /* 字体粗细为300*/} 
.pop-r{ font-weight:400; /* 字体粗细为400*/} 
.rbt-m{ font-weight:500; /* 字体粗细为500*/} 
.rbt-s{ font-weight:600; /* 字体粗细为600*/} 
.rbt-b{ font-weight:700; /* 字体粗细为700*/}

第三步:完成对页面代码的修改

<p class="Poppinser pop-l">使用自定义名为Poppinser的字体,粗细为300,其他类推</p>

— 于 共写了1255个字
— 文内使用到的标签:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注