整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
網(wǎng)站中，字體扮演了其中重要的一個(gè)角色，選用什么樣的字體也是一個(gè)相對比較重要的工作。不同的電腦，所安裝的字體不盡相同。那我們在做網(wǎng)站中該如何選擇字體呢？
圖片來源于網(wǎng)絡(luò)
中文字體：微軟雅黑、宋體、黑體；
英文字體：Arial、Helvetica
使用這些字體自帶的字體可以高度的還原設(shè)計(jì)稿上的文字效果。
我們在網(wǎng)站制作過程中，因頁面設(shè)計(jì)所需，常常會(huì)碰到一些特殊的字體，雖然引用了，卻無法在網(wǎng)頁中顯示和設(shè)計(jì)稿一樣的字體。這是由于用戶的電腦并沒有安裝這些特殊字體。
這種情況下，我們可以通過以下方法讓其正常顯示。
優(yōu)點(diǎn)：簡單、快捷、方便
缺點(diǎn)：不易更改（需要會(huì)ps）、放大縮小會(huì)失真、不利用優(yōu)化
適用于不常更新的區(qū)域，如首頁的標(biāo)題、固定的欄目標(biāo)題等。
如下圖“聯(lián)系”兩字
圖片來源于網(wǎng)絡(luò)
優(yōu)點(diǎn)：方便后期用戶操作，直接更改文字即可、利于優(yōu)化
缺點(diǎn)：中文字體較大，會(huì)影響加載速度。
如下圖數(shù)字
圖片來源于網(wǎng)絡(luò)
1）下載所需的字體樣式，格式有所區(qū)別，常用.TTF、.woff、.OTF等格式
可通過在線字體轉(zhuǎn)換，將字體格式轉(zhuǎn)化為我們需要的格式。
字體格式轉(zhuǎn)換一：
https://www.fontsquirrel.com/tools/webfont-generator
字體格式轉(zhuǎn)換二：
https://www.fontke.com/tool/convfont/2）css中引用字體格式：
@font-face {
font-family: '字體名稱';
src: url('../fonts/字體名稱.eot');
src: url('../fonts/字體名稱.eot?#iefix') format('embedded-opentype'),
url('../fonts/字體名稱.woff2') format('woff2'), url('../fonts/字體名稱.woff') format('woff'),
url('../fonts/字體名稱.svg#字體名稱') format('svg'); font-weight: normal; font-style: normal;
}3）引用：
.num {
font-family: 字體名稱；
}由于中文字體體積較大，預(yù)覽下載需要一定的時(shí)間，打開會(huì)比較慢，英文字體體積本身比較小，不存在這樣的問題。
在前端開發(fā)過程中，psd稿中經(jīng)常會(huì)使用特殊的字體樣式，我們在處理時(shí)需要考慮到一些可能出現(xiàn)的情況及問題：
1.字體樣式是否存在版權(quán)問題
2.文字分情況劃分：
例：在logo、特殊圖片、固定圖片、固定背景圖等位置中，不需要后臺(tái)數(shù)據(jù)更改遍歷的固定型文字，可以使用切成圖片的形式來展現(xiàn)
例：在一些需要遍歷的后臺(tái)數(shù)據(jù)，如：新聞標(biāo)題、日期時(shí)間、欄目banner文字等，這些需要css引入外部字體樣式來實(shí)現(xiàn)
外部字體樣式引用方法：
<1>.下載所需的字體樣式，格式有所區(qū)別，常用.TTF、.OTF格式格式
.TTF或.OTF，適用于Firefox 3.5、Safari、Opera
.EOT，適用于Internet Explorer 4.0+
.SVG，適用于Chrome、IPhone
<2>.將字體文件放入項(xiàng)目文件夾，通常在css中font文件夾
<3>.css中引用方法
<4>.標(biāo)簽中引用
前端開發(fā)過程中難免會(huì)用到特殊字體，如何引入特殊字體？
@font-face {
font-family: 'icomoon'; // 這里自定義字體名稱
src: url('fonts/icomoon.eot?'); // 文件路徑或者服務(wù)器路徑
src: url('fonts/icomoon.eot?') format('embedded-opentype'), // format屬性：字體的格式 主要用于瀏覽器識(shí)別
url('fonts/icomoon.ttf?') format('truetype'),
url('fonts/icomoon.woff?') format('woff'),
url('fonts/icomoon.svg?') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 調(diào)用 */
body{
font-family:'icomoon'
}
注：eot為IE專用，ttf官方說是蘋果和微軟為PostScript 而開發(fā)的字體格式，個(gè)人理解為通用格式。woff是壓縮過后輕量級(jí)，svg對文本支持不太好
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
