html5——web字体

时间 2019-12-05

标签 html5 html web 字体栏目 HTML5 繁體版

原文原文链接

基本介绍css

一、自定义网页特殊字体，无需考虑用户电脑上是否安装了此特殊字体，今后把特殊字体处理成图片的时代便成为了过去。html

二、支持程度比较好，甚至IE低版本浏览器也能支持。web

三、web字体的大小鉴定是字体的高度浏览器

字体格式svg

一、.eot格式：IE专用字体，支持浏览器IE4+字体

二、.ttf格式：Windows和Mac的最多见的字体，是一种RAW格式，支持浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+网站

三、.otf格式：被认为是一种原始的字体格式，其内置在.ttf的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+编码

四、woff格式：Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+url

五、.svg格式：基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；spa

字体图标

一、阿里巴巴矢量图库：http://www.iconfont.cn/

二、Font Awesome ：http://www.bootcss.com/p/font-awesome/

三、以上网站拥有丰富的字体图库，阿里巴巴可能有版权问题，建议第二个

阿里字体

一、拷贝项目下面生成的font-face

二、定义使用iconfont的样式

三、在标签添加样式，并写入字体编码

四、也能够使用伪元素进行在样式类中就插入字体编码

注意事项

一、'\e605'是Unicode编码’&#x605‘转化来的，这是固定格式

二、@font-face是用来声明本身的自定义字体，这也是固定格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font/iconfont.woff') format('woff'),
            url('font/iconfont.ttf') format('truetype'),
            url('font/iconfont.svg#iconfont') format('svg');
        }
        
        .self-font::before {
            content: '\e605';
            font-size: 30px;
            font-family: "iconfont" !important;
        }
    </style>
</head>
<body>
<span class="self-font"></span>
</body>
</html>

Font Awesome

一、直接引用CSS

二、直接在标签中添加类名（原来也是伪元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>
<span class="icon-play">播放图标</span>
<span class="icon-beer">啤酒图标</span>
<span class="icon-book">图书图标</span>
<span class="icon-money">金钱图标</span>
</body>
</html>