CSS3使用自定义字

CSS3使用自定义字体

1.下载字体

注意：Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。而Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
下载字体相关网站：
Font Squirrel这个免费的字体资源网站上有很多字体提供下载，上面多是otf和ttf格式的字体。
defont.com一个免费的字体资源网站，下载后的格式一般为ttf。
绿豆堂字体有很多免费的字体资源网站，下载后的格式一般为ttf。

为了满足兼容性，我们可以使用：
TTF to EOT Font Converter这个字体转换工具，将ttf格式的字体转换为eot格式来兼容IE浏览器，此在线工具只能转换小于1M的ttf文件。
Font Squirrel提供的generator，进入之后选择expert选项，就可以实现各种字体格式之间的转换了（我使用的汉仪菱心体简，不知道为什么被拉入了转换黑名单）。
字客网在线转换，可以转换成各种格式。

字体使用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>CSS3自定义字体 - zj</title><base target="_blank"/><meta charset="utf-8" /><style>@font-face{font-family:myFont;src:url('js/hanyilingxintijian.ttf'),url('js/hanyilingxintijian.eot');  }
</style>
</head>
<body><span style="font-size: 26px;">10086</span><hr /><span style="font-family: myFont;font-size: 26px;">10086</span>
</body>
</html>

效果

CSS3使用自定义字相关推荐

使用css3实现首字下沉
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>使用c ...
html5用css做样式边框,纯CSS3实现自定义Tooltip边框涂鸦风格
本文作者html5tricks,转载请注明出处这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...
CSS3之自定义英文字体@font-face
现在CSS3已经很流行了.传说中的CSS3基本上什么都可以,那么CSS3中可不可以自定义英文字体呢?答案是非常可以.用@font-face即可实现自定义英文字体,下面咱们一起去看看吧. 1.语法规则 ...
css3之自定义字体
我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如但是因为在电脑上安装的字体有限,所以很多时候我们都找不到自己想要的字体,这时候我们就需要使用css3提供的@font-face来实 ...
html立方体插件,jquery+css3立方体自定义生成（原创）
插件描述:jq+css3矩体自定义生成,可自定义宽高和面的分离量欢迎使用矩体自定义生成插件在使用之前,您需要了解,该插件是基于jquery制作的,您需要引入最新版jquery.js jquery. ...
关于css3的自定义字体
css3的@font-face属性打破了中文页面字体一成不变的格局,但今天本菜在用的时候并不那么爽.开始各种引用外部ttf文件失败.下了300M+的字体文件,苦逼的试了一下午.终于有一个ttf引用成功 ...
css3的自定义字体
以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下 ...
java错误光标的闪烁怎么设置_【CSS3】自定义设置可编辑元素闪烁光标的颜色
前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法, 需要通过平时的基础积累和经验. 解决方案使用 ::first-line 伪元素 ...

CSS3使用自定义字

CSS3使用自定义字体

1.下载字体

字体使用

效果

CSS3使用自定义字相关推荐

最新文章

热门文章