当谈到这个CDN的内容如何运作时,我有一个普遍的知识缺口.以下是我所指的CDN Font Awesome 6.3的链接.我抓起上述CDN内的文本,测量了它的大小,达到99.65KB.鉴于令人敬畏的字体库如此之广,似乎不太可能将所有图标都包含在这么小的尺寸中.看一看代码,我可以看到图标只有很少的代码,只涉及内容.

.fa-日历-天数:在{Content:"\f073"}之前

我不明白的是,您如何从这个css中实际检索图标.例如,如果我在我的HTML中写了<i class="fas fas-calendar-days/>,这是否会向Font Awesom发起另一个服务器请求,以检索包含内容"\f073"的图标?

推荐答案

如果您一直滚动到页面底部,您将看到以下部分的css:

@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");

基本上,Font Awesom使用一种特殊的"字体"(因此是其名称的第一部分),其中unicodes实际上是图标,因此该字体中的\f073指的是从给定字体呈现的特殊定义的内容.图标的实际外观被定义为该字体文件的一部分.

Html相关问答推荐

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

将文本区域标签的内容着色为SON(带有 colored颜色 )

Blazor中有1像素高行的表格

R中的动态Webscraping

你能让Cypress测试为p—fileUpload做文件上传吗?

放大缩小标题在外面的图像

如何使用html和css将两个项目垂直对齐

使用无限数量的元素创建特定的CSS网格

摆动的html标签

在Firefox中,使用写入模式:Vertical-LR时,不随内容扩展的css弹性项

使用Cypress循环遍历不一致的父对象

有没有什么方法可以很容易地给一个SVG一个插框阴影?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

带有下拉菜单的完整css导航-链接不起作用?

使用不同字体对齐元素

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

a with