`
zhangyaochun
  • 浏览: 2621097 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3的@font-face

    博客分类:
  • css3
阅读更多

本文是css3的@font-face的探究:

 

 

1、语法

 

 

@font-face:{属性:取值}

 

取值

 

 

  • font-family 设置文本的字体名称
  • font-style 设置文本样式
  • font-variant 设置文本是否大小写
  • font-weight 设置文本的粗细
  • font-stretch 设置文本是否横向的拉伸变形
  • font-size 设置文本字体大小
  • src 设置自定义字体的相对路径或者绝对路径

说明

可以加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。




2、兼容性:

  • .eot格式
Embedded Open Type,IE专用字体,可以用TrueType创建此格式字体

 
  • .tff格式
TureTpe字体是Windows和Mac的常见字体,是一种RAW格式

IE9+ |  Chrome4+  | iOS Mobile Safari4.2+


 
  • .otf格式
OpenType被认为一种原始的字体格式,支持:

FF3.5+ |  Chrome4.0+ | Safari3.1+ | Opera10.0+ | iOS MObile Safari 4.2+


  • .svg格式
基于SVG字体渲染的一种格式,支持的浏览器:

Chrome4+ |  Safari3.1+ | Opera10.0+ |  iOS MObile Safari 3.2+



下载免费的字体

司徒博文中推荐的工具



还有一个不错的在线字体转换工具


扩展阅读:




  • 大小: 27.6 KB
  • 大小: 26.3 KB
分享到:
评论

相关推荐

    CSS3@font-face

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

    CSS3 @font-face网页中的字体

    【CSS3 @font-face网页中的字体】 在网页设计中,字体的选择对于页面的视觉效果有着至关重要的作用。CSS3引入的`@font-face`规则,让网页设计师能够使用非系统默认的字体,从而打破传统浏览器对字体的限制,提供更...

    icon通过@font-face实现

    本篇文章将详细讲解如何通过`@font-face`和CSS3技术来实现icon图标。 `@font-face`是CSS3中引入的一个特性,允许开发者在网页中使用非系统默认的自定义字体。它的工作原理是将字体文件(如.ttf、.eot、.woff等格式...

    @font-face制作Web Icon

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

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

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

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

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

    H5 @font-face 和 @keyframes 的使用

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

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

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

    @font-face.rar

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

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

    @font-face规则是CSS3引入的一个特性,使得设计师能够引用网络上的字体资源,而不是局限于用户本地已安装的字体。 在CSS中,@font-face的语法结构如下: ```css @font-face { font-family: ; src: <source> [][,...

    css3_@font-face

    在CSS3中,`@font-face`规则是一个强大的特性,它允许网页设计师在不依赖于用户计算机已安装的字体的情况下,引入自定义字体到网页中。这个特性打破了浏览器对字体的限制,使得网页设计可以拥有更丰富的视觉效果。在...

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

    CSS的`@font-face`规则就是实现这一功能的关键。`@font-face`允许我们将字体文件与网页关联,使得在用户访问网页时,即使他们本地没有安装该字体,也能正确显示。 `@font-face`的语法结构如下: ```css @font-face...

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

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

    html5自定义字体@font-face

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

    响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例2-2 @font-face用法

    在本教程中,我们将深入探讨HTML5、CSS3以及Bootstrap框架在构建响应式页面中的应用,特别是关注CSS3的`@font-face`规则,它是实现自定义字体的关键技术。 在传统的Web设计中,网页主要使用系统预设的字体,这限制...

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

    `@font-face`是CSS3引入的一个规则,它允许开发者在网页中引用远程字体资源,从而实现网页自定义字体。使用`@font-face`,开发者可以定义一个或多个字体家族,并指定每个家族的源(即字体文件)。语法结构如下: ``...

    CSS3 @font-face属性使用指南

    在CSS3中,`@font-face`规则是一个强大的特性,允许开发者将自定义字体引入到网页设计中,从而使页面的视觉效果更加个性化和独特。这个属性使得我们可以引用远程的字体文件,让浏览器下载并显示这些非标准字体,而...

Global site tag (gtag.js) - Google Analytics