使用CSS3的 @font-face 显示自定义字体

之前我们要是想使用漂亮的字体只能使用图片字体图片,即制作过程偏慢,用户体验也不够好,对于计算机的加在也是一种负荷,现在css3为我们提供了新的自定义字体属性: @font-face,不但使用简单,而且几乎能解决了我们之前的所有问题。
    先上代码:<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>css3自定义字体</title>
<style type="text/css">
@font-face{
font-family:myFont;
src:url(‘The Heart of Everything Demo.ttf‘),url(‘Sansation_Light.eto‘);
}
@font-face{
font-family:myFont;
src:url(‘The Heart of Everything Demo.ttf‘),url(‘Sansation_Bold.eot‘);
}
div{font-family:myFont;}
</style>
</head>
<body>
<div>百度一下,beautiful你就知道。myFont百度一下,你就知道。how are you!</div>
</body>
</html>

上面就是引用的基本方法,当然我们为了更好地兼容不同版本的浏览器我们可以再加一些兼容写法,这里就不重复了。现在我们就需要下载字体了,个人比较推荐http://www.dafont.com/theme.php?cat=101  一个免费的字体网站,我们可以直接下载我们想要的字体,在上面的url路径里面选择任何我们想要的一款字体的名称就好了,希望对大家有帮助。

下面是我们的浏览效果:

时间: 2025-01-18 07:40:16

使用CSS3的 @font-face 显示自定义字体的相关文章

TextView显示自定义字体、字体背景色、粗/斜体、上/下标、超链接和浮雕效果等

为控件中的文字添加显示效果,包括: 设置自定义字体 设置文字颜色及文字背景颜色 设置粗体 设置斜体 添加下划线 添加删除线 添加缩放效果 设置上标 设置下标 设置链接效果 设置文字模糊特效 下载地址:http://www.dwz.cn/zm0qR

自定义字体的方法

网页自定义字体终极教程(兼容各大浏览器)作者:零度逍遥 | 时间:2014-08-25 | 浏览:1050 | 0 条评论在我们浏览网页的时候,文字占据着网页的大部分空间,给我们提供重要的信息,所以作为前端开发工程师,我们有义务把网页的字体设计的更加美观,让用户看起来更加舒适,随着CSS3的出现,网页自定义字体收到越来越多的开发人员欢迎. 我想有人可能会像我一样,尝试搜索过各种方法,但都不是太理想,有的是加载不成功,有的则是兼容性不好,无奈,自己闷头研究,终于在今天有了个成果,给大家分享一下.

CSS3的自定义字体@font-face:将图片ICON转为字体

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法. 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格式,比如png8 alpha透明或者png8 index透明等. 比如,t

css3 自定义字体的使用方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3自定义字体.

终于看完了<响应式WEB设计:HTML5+CSS3实战>这个书啦,那个高兴. 看完后学了一些东西,在这里记一下如何用CSS3实现自定义的字体效果. 首先去下载些自己想要的字体,放在文件目录下面. 1:在Css中用@font-face定义字体 1 @font-face{ 2 font-family:'myfont'; //你想给你的自定义的文字起一个什么样的名称[请自便] 3 src:url(./yizhuifangxiu.ttf);//你自定义文字文件的路径 4 font-weight:700

在前端页面中使用@font-face来显示web自定义字体【转】

本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使

TextView的一些高级应用(自定义字体、显示多种颜色、添加阴影)

1.    自定义字体 可以使用setTypeface(Typeface)方法来设置文本框内文本的字体,而android的Typeface又使用TTF字体文件来设置字体 所以,我们可以在程序中放入TTF字体文件,在程序中使用Typeface来设置字体:第一步,在assets目录下新建fonts目录,把TTF字体文件放到这里.第二步,程序中调用: TextViewtv = (TextView)findViewById(R.id.textView); AssetManagermgr=getAsset

CSS3 使用自定义字体

CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上.您“自己的”的字体是在 CSS3 @font-face 规则中定义的. Firefox.Chrome.Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenTyp

Android 如何在IDEA Eclipse 的UI Editor 中显示自定义的字体 Preview

将要显示的字体复制到.android-sdk/platforms/android-[Version]/data/fonts 文件夹下面 如:FontAwesome-Regular.ttf 在android-sdk/platforms/android-[Version]/data/fonts 下打开 fallback_fonts.xml 在最后加上: <family> <fileset> <file>[复制到文件加下的文件名,如:FontAwesome-Regular.t