@font-face{font-family:examplefont;src:local(Example Font),url('examplefont.woff')format("woff"),url('examplefont.otf')format("opentype");} 规范 浏览器兼容性
MDN的@font-face这是一个CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face可以消除对用户电脑字体的依赖。 src 远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e.src: local('Arial'); )。 如果找不到...
CSS font-face - when使用多个src描述符是指在使用@font-face规则时,可以通过多个src描述符来指定字体文件的来源。 @font-face规则允许网页设计师使用自定义字体,而不仅限于用户计算机上已安装的字体。通过使用@font-face规则,可以将字体文件嵌入到网页中,从而确保用户在浏览网页时能够正确显示所需的字体。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face: @font-face{font-family:'YourWebFontName';src:url('YourWebFontName.eot');/*IE9 C...
/*第一步:定义自定义字体*/@font-face{/*大括号:设置引入规自定义字体的规则*//*该font-family是规则符,不是属性。用于描述自定义字体的名称*/font-family:'自定义字体名称';src:url(‘自定义字体文件’)(相对路径、绝对路径)}/*第二步:向元素应用自定义字体*/ ...
src:自定义字体的来源,仅支持配置一个url,不支持多个。目前支持如下来源: 项目中的字体文件:通过 url 指定项目中的字体文件路径(只支持绝对路径)。 网络字体文件:通过 url 指定网络字体的地址。 系统字体(1100+):通过 local 指定系统字体名称。 在style 中定义了 font-face 后,即可在组件中通过属性 font-family...
一、 font-face基本用法 font-face的基本用法想必大家都是知道的,基本上就是类似这样: @font-face{font-family:Lato;src:url('font-lato/lato-regular-webfont.woff2')format('woff2'),url('font-lato/lato-regular-webfont.woff')format('woff'),url(font-lato/lato-regular-webfont.ttf)format("opentype...
font-face { font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];} 取值说明 1、YourWebFontName:此值指的就是自定义的字体名称，最好是使用下载的默认字体，他将被引用到Web元素中的font-family。如“...
src: local(SimSun); }` 一般情况下我们声明一个页面上的字体会这样子写: body { font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif; } 事实上我们可以利用font-face是变量的这一特性,可这如下声明: ...
src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ } 但为了让各多的浏览器支持,你也可以写成: @font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ ...