CSS3使用自定义字

最新推荐文章于 2024-05-28 20:45:00 发布

qq_42026177

最新推荐文章于 2024-05-28 20:45:00 发布

阅读量224

点赞数

分类专栏： CSS3 文章标签： css

原文链接：https://www.cnblogs.com/zhuzhenwei918/p/5984445.html

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

效果

在这里插入图片描述

qq_42026177

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3使用自定义字

CSS3使用自定义字CSS3使用自定义字1.下载字体注意：Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。而Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。下载...
复制链接

扫一扫