`

CSS3 嵌入字体 @font-face

    博客分类:
  • CSS3
 
阅读更多
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}


<style type="text/css">
@font-face{
    font-family: "MOOC Font";/*必须项,设置@font-face中font-family同样的值*/
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
    font-family: "MOOC Font";
}
</style>  


http://www.imooc.com/code/645
分享到:
评论

相关推荐

    CSS3 @font-face网页中的字体

    `@font-face`是CSS3中的一种样式规则,允许开发者在网页中嵌入自定义字体,这样用户在访问网站时无需在本地安装这些字体也能正常显示。该规则由多个属性组成,包括`font-family`、`src`等,定义了字体家族名称和字体...

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

    CSS3中的@font-face规则允许网页设计师将自定义字体嵌入到网页中,从而提供比传统Web安全字体更多的选择。这个特性在CSS3之前就已存在,但是由于浏览器的支持不统一,后来从CSS2.1中被移除。直到CSS3的出现,@font-...

    html5自定义字体@font-face

    `@font-face`规则允许开发者将字体文件嵌入到网页中,这样无论用户计算机上是否安装了这些特定字体,浏览器都能正确显示。这个功能对于品牌识别、提升用户体验以及实现独特设计风格尤其有用。下面我们将深入探讨`@...

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

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

    @face-font 嵌入中文字体实例和ttf转换eot, woff, svg转换工具

    `@font-face` 是 CSS3 提供的一种字体嵌入规则,它允许开发者将本地或者在线的字体文件引入到网页中,使网页可以使用非系统默认的字体。在中文环境下,尤其需要解决跨平台、跨浏览器的中文字体显示问题,`@face-font...

    使用CSS3的font-face字体嵌入样式的方法讲解

    CSS3的`@font-face`规则打破了这一局限,使得网页设计师能够嵌入自定义字体,无论用户是否在本地安装了这些字体。 `@font-face`的语法结构如下: ```css @font-face { font-family: '自定义字体名称'; src: url...

    什么是@font-face及font-face如何在css中使用

    在Web设计中,@font-face CSS规则是一个至关重要的特性,它允许设计师引入并使用自定义字体,即使这些字体并未预装在用户的计算机上。这意味着设计师不再受限于浏览器默认的字体库,可以创建更加独特和个性化的网页...

    CSS @font-face属性实现在网页中嵌入任意字体

    CSS的`@font-face`规则为我们提供了一个解决方案,可以实现在网页中嵌入自定义字体,使得无论用户系统是否安装了这些字体,都能够正确显示页面设计。下面我们将详细探讨`@font-face`的使用方法及其背后的原理。 ...

    css3系列教程(嵌入字体网络字体).rar

    在网页设计领域,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中一项就是关于字体的革命——嵌入字体和网络字体。这个“CSS3系列教程(嵌入字体网络字体).rar”压缩包文件正是针对这一主题提供的一份详细...

    详解如何在css中引入自定义字体(font-face)

    使用@font-face规则,我们可以将设计师定制的字体嵌入到网站中,给网页带来独特、个性化的外观。随着CSS技术的演进,@font-face已经成为了网页设计中不可或缺的一部分。下面详细介绍如何在CSS中使用@font-face规则,...

    网页应用特殊字体实例(附带字体转换工具)

    在Web开发中,`@font-face` 是CSS3引入的一个关键特性,允许开发者在不依赖用户设备已安装的字体的情况下,直接在网页中加载和使用自定义字体。通过`@font-face`,我们可以指定一个或多个字体源(如URL链接或本地...

    微信小程序使用CSS3字体

    @font-face是CSS3中的一个模块,它主要是把自己定义的Web字体嵌入到的网页中。 @font-face的语法规则:   @font-face { font-family: ; src: &lt;source&gt; [][,&lt;source&gt; []]*; [font-weight: ]; [font-style: &lt;style...

    CSS3教程(7):CSS3嵌入字体

    那么就使用CSS3嵌入字体吧! 想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 上一篇:CSS3教程(6):创建网站多列 要使用一款字体,我们首先需要使用‘@font-face’...

    css3制作小图标

    首先,CSS3引入了`font-family`和`@font-face`规则,允许开发者将自定义字体嵌入到网页中,这对于制作图标非常重要。你可以通过在线服务如FontSquirrel生成Web字体包,将SVG图标转换为EOT、TTF、WOFF等格式,然后在...

    网页ie内嵌Fonts与css3样式

    CSS3的`@font-face`规则是实现跨浏览器字体嵌入的关键。它的基本语法如下: ```css @font-face { font-family: 'MyCustomFont'; src: url('myfont.eot'); /* IE9 and below */ src: url('myfont.eot?#iefix') ...

    CSS怎么调用外部特殊字体

    下面将详细讲解如何通过 CSS 的 @font-face 属性来实现在网页中嵌入任意字体。 首先,需要获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。这些格式包括 .TTF 或 .OTF、.EOT 和 .SVG。其中...

Global site tag (gtag.js) - Google Analytics