`
truth99
  • 浏览: 61442 次
  • 性别: 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-family ”来定义字体,然而我们用“font-family “定义的字体在用户的浏览器中是否可以呈现取决于用户的电脑上是否有安装我们定义的字体。在网络上...

    CSS3 @font-face网页中的字体

    NULL 博文链接:https://crabdave.iteye.com/blog/2343808

    @font-face制作Web Icon

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

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

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

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

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

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

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

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

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

    CSS3 @font-face属性使用指南

    本文介绍了css3的属性@font-face的使用方法,以及在@fant-face中使用字体化图标,有相同需求的小伙伴,自己参考下。

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

    在CSS3所有时髦的新功能中,很难说哪个最好。但是,假如非要找出 那么一个功能,一个现在就能用,而且能够令人浮想联翩的功能,我想 就要数Web字体了。

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

    @ font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是,它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。 为什么它是真...

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

    ...

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

    CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用该字体并显示出来,无论浏览网页的用户的本地端是否有该字体。 语法: CSS Code复制内容到...

    css3_@font-face

    https://blog.csdn.net/rookie_is_me/article/details/88394200字体文件资源

    深入理解CSS @font-face性能优化

    本文主要介绍字体加载优化的常用策略,大部分内容为引用和翻译。 一、 font-face基本用法 font-face的基本用法想必大家都是知道的,基本上就是类似这样: @font-face { font-family: Lato; src: url('font-lato/...

    css3Fonts:Bash脚本为css3转换字体并生成@font-face

    这个 CSS3 字体转换器是一个 shell 脚本,它允许开发人员使用命令行将一组字体,TTF/OTF/WOFF/WOFF2 转换为所有其他当前使用的 CSS3 @font-face 格式(即 EOT、SVG、WOFF , WOFF2)。 句法: css3fonts 例如,...

Global site tag (gtag.js) - Google Analytics