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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。