当前位置: 首页 > 面试题库 >

CSS @ font-face-“ src:local('')”是什么意思?

锺离玮
2023-03-14
问题内容

我是@font-face第一次使用,并从fontsquirrel下载了一个字体工具包

他们建议插入我的CSS中的代码是:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

现在,笑脸让我难过。但是src中的url数量也是如此-
为什么它们建议这么多文件,并且在呈现页面时会将它们全部发送到浏览器?删除除.ttf以外的所有内容是否有害?


问题答案:

如果您在font-squirrel的font-face生成器中阅读了注释,您会发现这是paul irish的陷阱。

### 和..关于@font-face语法

我现在建议在原始防弹语法上添加防弹笑脸版本。

 @font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf')

format(‘truetype’);
}

从防弹柱:

是的,这是一张笑脸。OpenType规范指出,在Mac上,任何两字节的unicode字符都根本无法使用字体名称,因此可以降低有人实际发布具有该名称的字体的可能性。

笑脸是更好的解决方案有以下几个原因:

  • Webkit + Font Management软件可以弄乱本地引用,例如将字形转换为A块。

  • 在OS X上,当尝试访问在Library/Fonts之外可以访问的local()字体时,字体管理软件可能会更改系统设置以显示对话框。有关我的防弹帖子的更多详细信息。字体浏览器X还可以使Firefox中的其他内容混乱。

*尽管不太可能,但您可以引用与您认为的字体完全不同的local()字体。(使用不同字体,相同名称的Typophile帖子)至少有风险,并且您将对类型的控制权移交给了浏览器和主机。这种风险可能不值得避免下载字体。

这些都是非常好的案例问题,但是值得考虑。



 类似资料:
  • 多年以来,人们一直被迫使用一组单调乏味的Web安全字体。当网页中需要使用一些优雅的字体时,设计师最常用的办法,就是把文字做成图片。但是,由于图片难以修改,也不利于网站SEO,因此不可能大范围使用该字体。 值得庆幸的是,CSS3的 @font-face 为设计师打开了一个全新的世界,它提供了一种自定义网页字体的方法,使设计师可以大胆使用任意自己想要的字体。 事实上,@font-face规则在CSS2

  • 问题内容: 什么是在这个CSS规则是什么意思? 问题答案: 是相邻的同级组合器。 这意味着选择只选择自带 之后 的。 插图: 选择了什么,没有选择什么: 选择 这个来之后第一。 未选择 这出现在第一后而不是在。由于它不会立即跟随,因此未选中。 但是,由于它仍然紧随元素之后,选择器不会立即匹配此元素,而是将使用通用的同级组合器来匹配该元素。 未选择 这位于内,并且在引号内没有满足其选择器的内容。

  • 问题内容: 我尝试阅读有关如何处理IE中自定义字体的多篇文章,但是它们似乎对我没有用。我尝试将字体转换为,但这似乎也不起作用。我不确定自己在做什么错,所以我将发布我的代码 问题答案: 这在ie8 / 9中有效

  • 以下是字体、字体和字体系列的定义: null 那么我可以将这3个中的哪一个指定为css font-family属性的值呢?如果我只指定字体族,那么如果我指定无衬线字体,那么浏览器将从用户系统中选择哪种无衬线字体来显示内容?用户系统上可能有许多无衬线字体。 先谢谢你,苏伦

  • 我正在为现代浏览器开发一个JavaScript应用程序,我不需要支持旧的浏览器。我想把字体嵌入到我的CSS文件中,而不是加载它们。 现在,当我使用Font Squirrel的@font-face生成器时,使用“base64 encode”--它只为我提供WOFF类型的数据URI,而不是TTF类型的数据URI。 它为什么要这么做?

  • 问题内容: 什么是正确的使用方式,以便浏览器不会在用户已经拥有字体的情况下下载它? 我正在使用@ font-face定义DejaVu,它已经安装在我的系统(linux)上。Firefox不会下载字体,但是Chromium每次都会下载它! 我的CSS代码基于字体松鼠,该问题如下所示: 问题答案: 如果要先检查本地文件,请执行以下操作: