Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
果蘋方字體
蘋果蘋方字體是一款藝術(shù)字體,深受廣大設(shè)計師的喜愛。
蘋果蘋方字體是蘋果為中國用戶打造的一款富有中國元素的中文字體,這套字體不僅字型優(yōu)美,而且也能提升在手機、電腦屏幕上的清晰度以及易讀性。這套字體包含簡體以及繁體中文,共有6種字重,可以很好地滿足日常設(shè)計和閱讀的需求。
蘋方字體6種字重粗細(xì)
為了讓蘋果的字體可以在 Windows、Android、Linux等其他平臺和設(shè)備上使用,網(wǎng)友已經(jīng)將蘋方字體全套從 Mac 系統(tǒng)里提取了出來,6種字重分別是極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體、粗體,全部都是 .ttf 格式。
蘋方中文字體的英文名稱為「PingFang SC」,在 HTML CSS 里面可以通過 Font-Weight 來設(shè)置字體粗細(xì)。網(wǎng)站已經(jīng)支持蘋方字體了,只要你在 Windows 10 下安裝好蘋方,那么訪問本站應(yīng)該就能看到默認(rèn)是蘋方的字體效果了。
包含以下字體
蘋方黑體-中粗-簡.ttf
蘋方黑體-極細(xì)-繁.ttf
蘋方黑體-極細(xì)-簡.ttf
蘋方黑體-細(xì)-繁.ttf
蘋方黑體-細(xì)-簡.ttf
蘋方黑體-纖細(xì)-繁.ttf
蘋方黑體-纖細(xì)-簡.ttf
蘋方黑體-中粗-繁.ttf
蘋方黑體-中黑-繁.ttf
蘋方黑體-中黑-簡.ttf
蘋方黑體-準(zhǔn)-繁.ttf
蘋方黑體-準(zhǔn)-簡.ttf
下載地址
高速網(wǎng)盤下載,為防止被莫名其妙和諧,建議轉(zhuǎn)存在自己網(wǎng)盤
個人非商用下載地址1
個人非商用下載地址2 速度快
***特別提示***
1、本站所有資源僅供學(xué)習(xí)與參考,請勿用于商業(yè)用途,否則產(chǎn)生的一切后果由您自己承擔(dān)!
2、字體用于商業(yè)用途,需要自行與權(quán)屬方聯(lián)系并取得書面授權(quán),該授權(quán)可能需要您支付相應(yīng)的版權(quán)費用。
3、免費下載不等于免費商用,請牢記,商用請聯(lián)系資源版權(quán)方購買授權(quán)!。
4、如有侵犯您的版權(quán),請及時聯(lián)系978767986@qq.com,我們將盡快處理。
前,瀏覽器只能展示本地安裝的字體。如果字體未安裝,網(wǎng)頁顯示效果會大打折扣。
為了解決這個問題,CSS 引入 web 字體,允許瀏覽器從服務(wù)器下載字體,下載完成后再重新渲染字體。
使用 web 字體前,需要了解常用的字體文件格式。
TTF 字體文件,即 TrueType 字體,是由蘋果和微軟在 20 世紀(jì) 80 年代末開發(fā)的字體標(biāo)準(zhǔn)。它是 macOS 和 Windows 操作系統(tǒng)使用最廣泛的字體格式。
OTF 字體文件,即 OpenType 字體,是一種可縮放的計算機字體格式。它建立在 TrueType 基礎(chǔ)上,是微軟的注冊商標(biāo)。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件,即 The Web Open Font Format 字體,是一種用于網(wǎng)頁的字體格式,2009 年開發(fā),如今是 W3C(萬維網(wǎng)聯(lián)盟)的推薦標(biāo)準(zhǔn)。WOFF 本質(zhì)是 OpenType 或 TrueType 字體,但是經(jīng)過壓縮并附加額外的元數(shù)據(jù)。在帶寬受限的網(wǎng)絡(luò)中,WOFF 能更好的支持從服務(wù)器到客戶端的字體傳輸。
WOFF 2.0 字體文件,相比于 WOFF,提供了更高的壓縮效率。
SVG 字體,將 SVG 用作顯示文本時的字形。SVG 1.1 規(guī)范定義了一個字體規(guī)范,允許在 SVG 文檔中創(chuàng)建字體。
EOT 字體文件,即 Embedded OpenType Fonts 文件,是微軟設(shè)計的一種用于網(wǎng)頁的嵌入式字體,它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示:
不同字體格式的瀏覽器兼容性,截圖數(shù)據(jù)來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務(wù)器目錄,然后定義新的字體名稱,并指向字體所在位置。
以京華老宋體為例,這是一款可以免費商用的中文字體。下載字體文件后,放到和 index.html 同級的目錄,重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內(nèi),使用 font-family 定義字體名稱,src 屬性定義字體文件路徑。
定義 web 字體
然后,像使用普通字體一樣,使用自定義字體樣式:
使用 web 字體
完
可以看作一種特殊字體,其展示的是圖標(biāo),而不再是文字,其擁有字體的特性,比如大小、顏色、透明效果、陰影等,字體圖標(biāo)加載快、不變形。也可以看作是矢量格式的圖標(biāo)。
(1)iconmoon字體圖標(biāo)庫:https://icomoon.io/app
(2)阿里iconfont字體圖標(biāo)庫:https://www.iconfont.cn/
(3)font-awesome字體圖標(biāo)庫:
以iconmoon為例
(1)選擇需要的圖標(biāo)并下載
1)在fonts文件夾下有四種類型的字體文件,每種字體文件兼容瀏覽器的種類不同
a).tff格式(TrueTypeFont),美國蘋果公司和微軟公司共同開發(fā)的,在Windows和Mac操作系統(tǒng)中為默認(rèn)字體;IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b).woff格式(Web Open Font Format-Web開放字體格式),是一種網(wǎng)頁所采用的字體格式標(biāo)準(zhǔn),使用zlib壓縮,文件大小一般比TTF小40%;IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c).eot格式(Embedded Open Type-嵌入式OpenType ),微軟設(shè)計用來在網(wǎng)頁使用的字體格式,是OpenType字體的壓縮格式,IE專用,IE4+支持該字體。
d).svg格式(Scalable Vector Graphics-可縮放的矢量圖形),它是一種用XML定義的語言,用來描述二維矢量及矢量/柵格圖形;Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e).otf格式(Open Type Font),Microsoft和Adobe公司開發(fā)的,.otf格式比.ttf更為強大,可以把PostScript字體嵌入到TrueType中。
2)字體轉(zhuǎn)換
https://www.fontke.com/tool/convfont/
(2)字體圖標(biāo)的引入
1)把字體放到項目的相應(yīng)位置
將下載解壓后的fonts文件夾放到項目路徑下
2)在html頁面中引入字體
利用CSS的@font-face屬性,引入外部字體;
在style.css文件中有如下代碼,為固定用法,注意url中字體路徑,其它可以不變。
在html的style標(biāo)簽中引入如下代碼:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3)為元素用該字體
span {
font-family: "icomoon";
}
4)為元素添加內(nèi)容
復(fù)制demo.html中需要的圖標(biāo),如下,將其作為元素的內(nèi)容。
<span>?</span>
(3)新增字體圖標(biāo)的引入
當(dāng)利用iconmoon選用字體圖標(biāo)時,如果有新增的字體圖標(biāo)需要加入,則需要用到.json文件,如下,在原先選擇的基礎(chǔ)上,再選擇新選擇的字體圖標(biāo),然后再下載使用。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。