`
truth99
  • 浏览: 62939 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
阅读更多

废话不说 进入正题

首先你要有字体文件 两种就够了 一个是.ttf 一个是.eot。
.ttf文件到网上搜索,一搜一大把,主要是.eot文件。
ttf转换成eot:
有个工具ttf2eot,也可以到网上下载安装。安装完成后,在命令控制符里敲一些命令,看图就够了(但要有这个软件ttf2eot),如果有其他的转换软件也可以。



有文件就要用了!
css文件中代码:

body {
	font-size:70px;
	color:#f93848;
	font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif;
	text-align:center
}
@font-face {
    font-family: "fzkt";
    src: url('../fonts/fzkt.eot'),url("../fonts/fzkt.ttf");
}
div {
	font-family: fzkt ;
	font-size:70px;
}


见效果图:



很不错吧。
主流的浏览器我都试过了,都可以。但是有的字体在IE上显示不出来。

我把源码加上了,可以下载运行一下

分享到:
评论

相关推荐

    CSS3 @font-face网页中的字体

    CSS3引入的`@font-face`规则,让网页设计师能够使用非系统默认的字体,从而打破传统浏览器对字体的限制,提供更丰富的文字表现力。下面将详细解释`@font-face`的工作原理以及如何在网页中应用它。 一、@font-face...

    CSS3@font-face

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

    icon通过@font-face实现

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

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

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

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

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

    @font-face制作Web Icon

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

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

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

    @font-face.rar

    `@font-face` 规则的工作原理是通过定义一个字体族名和指向字体文件的URL,使得浏览器能够下载并渲染这些非系统默认的字体。其基本语法如下: ```css @font-face { font-family: 'CustomFont'; src: url('path/to...

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

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

    css3_@font-face

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

    H5 @font-face 和 @keyframes 的使用

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

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

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

    html5自定义字体@font-face

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

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

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

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

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

    CSS3 中文手册【圆角,多背景,@font-face 用户自定义字体,文字阴影等等】

    【真正的CSS3中文手册,不是CSS2的...圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等。 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

Global site tag (gtag.js) - Google Analytics