`

在 css 中使用 @font-face

    博客分类:
  • css
阅读更多
@font-face 允许用户使用自定义的字体。在css中定义时,表示让浏览器下载指定的字体,并且显示。定义需要放在文件的开头。
字体文件有许多种格式。有的浏览器只支持某几种格式。

下面的定义,可以最大兼容浏览器支持:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


然后就可以使用了:
body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}












-

https://css-tricks.com/snippets/css/using-font-face/
--




-
分享到:
评论

相关推荐

    CSS3 @font-face网页中的字体

    定义好`@font-face`后,就可以在CSS中像使用其他系统字体一样使用自定义字体了: ```css body { font-family: 'MyWebFont', sans-serif; } ``` 这段代码会让网页的文本使用"MyWebFont"字体,如果浏览器不支持或...

    icon通过@font-face实现

    `@font-face`是CSS3中引入的一个特性,允许开发者在网页中使用非系统默认的自定义字体。它的工作原理是将字体文件(如.ttf、.eot、.woff等格式)引入到网页,然后通过CSS选择器来应用这些字体。对于图标来说,我们...

    CSS3 + @font-face 在网页中嵌入自定义Web字体

    2. 在CSS中使用@font-face规则声明字体,指明字体的名称和字体文件的路径。 3. 在样式表中通过字体名称引用这个字体,并应用于网页的元素上。 4. 浏览器加载到相应的样式表时,会下载字体文件到浏览器的缓存,并在...

    CSS3@font-face

    CSS3 @font-face实现个性化字体 制作页面的时候,我们常用“font-family ”来定义字体,然而我们用“font-family “定义的字体在用户的浏览器中是否可以呈现取决于用户的电脑上是否有安装我们定义的字体。在网络上...

    @font-face制作Web Icon

    @font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上,不过这样一来...

    网页自定义字体CSS @font-face应用及制作.docx

    @font-face 是一种 CSS 规则,用于在网页中自定义字体,实现网页设计中字体的自定义。通过 @font-face 规则,可以将自定义的字体应用于网页中,使得网页设计变得更加丰富多样。 @font-face 的语法规则是:`@font-...

    css3_@font-face

    引入自定义字体后,我们可以在CSS样式中使用它们,如下所示: ```css body { font-family: '自定义字体名称', Arial, sans-serif; /* 在自定义字体不可用时,使用备选字体 */ } ``` 在实际项目中,管理自定义字体...

    @font-face.rar

    `@font-face` 是一个CSS(层叠样式表)规则,它允许网页设计师在不依赖特定浏览器默认字体的情况下,引入自定义字体到网页中,从而实现跨平台、跨设备的统一字体显示。这个规则在HTML5中得到了广泛支持,极大地提升...

    H5 @font-face 和 @keyframes 的使用

    `@font-face`是CSS3中的一个关键特性,它允许开发者在网页中使用非系统自带的字体,即在线加载和显示自定义字体。这打破了以往只能依赖用户计算机已安装字体的限制,为网页设计提供了更多的自由度。 #### 使用步骤...

    css3 @font-face 非系统字体添加

    在CSS3中,`@font-face`规则是一个强大的特性,允许开发者引入非系统字体到网页设计中,从而提供更丰富的视觉体验。这个功能打破了浏览器对系统内置字体的依赖,使得设计师能够灵活地使用各种定制字体,提升网站的...

    网页自定义字体CSS-@font-face应用及制作.pdf

    总的来说,`@font-face`是CSS中一个强大的特性,它允许开发者在网页设计中使用丰富的字体库,创造出独特而吸引人的视觉效果。理解并熟练运用`@font-face`,可以极大地提升网页的个性化和专业性。

    网页自定义字体CSS @font-face应用及制作.pdf

    网页自定义字体CSS @font-face的应用及制作是网页设计中的一项重要技术,它允许开发者在网页上使用非系统默认的字体,从而提升网站的视觉效果和品牌一致性。@font-face规则是CSS3引入的一个特性,使得设计师能够引用...

    自定义web字体并通过@font-face在网页中嵌入自定义字体

    `@font-face`规则是CSS(层叠样式表)提供的一种方法,允许开发者在网页中使用非系统默认的字体,使得设计师能够更加自由地实现他们的视觉设计理念。本篇文章将详细探讨如何使用`@font-face`规则在网页中嵌入自定义...

    css中引入指定字体@font-face兼容各浏览器的问题

    网页制作中,如果想使用特定的字体可以通过 @font-face 引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意: 支持 @font-face 的浏览器有Internet Explorer 9、Firefox Opera、...

    第43章 服务器端字体和@font-face属性

    在Web开发中,服务器端字体和CSS的`@font-face`属性是实现网页自定义字体显示的关键技术。这一章节我们将深入探讨这两个概念以及它们在实际应用中的重要性。 首先,服务器端字体是指存储在服务器上的字体文件,这些...

    html5自定义字体@font-face

    在HTML中使用自定义字体,只需像使用普通字体那样设置`font-family`属性: ```html <p style="font-family: '我的自定义字体', Arial, sans-serif;">这是使用自定义字体的文字。 ``` 这里,如果浏览器不支持`'我的...

    CSS3通过@font-face加载字体文件

    通过@font-face能够加载服务器端的字体文件 font-family: "MOOC Font"; 表示该字体文件的引用,可以自定义 src: url("../other/niuniu_body.ttf"); 表示指定字体文件的路径 可以去...

Global site tag (gtag.js) - Google Analytics