果蘋方字體

蘋果蘋方字體是一款藝術字體，深受廣大設計師的喜愛。

蘋果蘋方字體是蘋果為中國用戶打造的一款富有中國元素的中文字體，這套字體不僅字型優美，而且也能提升在手機、電腦屏幕上的清晰度以及易讀性。這套字體包含簡體以及繁體中文，共有6種字重，可以很好地滿足日常設計和閱讀的需求。

蘋方字體6種字重粗細

為了讓蘋果的字體可以在 Windows、Android、Linux等其他平臺和設備上使用，網友已經將蘋方字體全套從 Mac 系統里提取了出來，6種字重分別是極細體、纖細體、細體、常規體、中黑體、中粗體、粗體，全部都是 .ttf 格式。

蘋方中文字體的英文名稱為「PingFang SC」，在 HTML CSS 里面可以通過 Font-Weight 來設置字體粗細。網站已經支持蘋方字體了，只要你在 Windows 10 下安裝好蘋方，那么訪問本站應該就能看到默認是蘋方的字體效果了。

包含以下字體

蘋方黑體-中粗-簡.ttf

蘋方黑體-極細-繁.ttf

蘋方黑體-極細-簡.ttf

蘋方黑體-細-繁.ttf

蘋方黑體-細-簡.ttf

蘋方黑體-纖細-繁.ttf

蘋方黑體-纖細-簡.ttf

蘋方黑體-中粗-繁.ttf

蘋方黑體-中黑-繁.ttf

蘋方黑體-中黑-簡.ttf

蘋方黑體-準-繁.ttf

蘋方黑體-準-簡.ttf

下載地址

高速網盤下載，為防止被莫名其妙和諧，建議轉存在自己網盤

個人非商用下載地址1

個人非商用下載地址2 速度快

***特別提示***

1、本站所有資源僅供學習與參考，請勿用于商業用途，否則產生的一切后果由您自己承擔！

2、字體用于商業用途，需要自行與權屬方聯系并取得書面授權，該授權可能需要您支付相應的版權費用。

3、免費下載不等于免費商用，請牢記，商用請聯系資源版權方購買授權！。

4、如有侵犯您的版權，請及時聯系978767986@qq.com，我們將盡快處理。

前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。

為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。

字體文件格式

使用 web 字體前，需要了解常用的字體文件格式。

TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。

OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。

WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。

WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。

SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。

EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。

不同字體格式的瀏覽器兼容性下圖所示：

使用自定義字體

使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。

以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。

在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。

然后，像使用普通字體一樣，使用自定義字體樣式：

完

.什么是字體圖標

可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

2.字體圖標常用免費資源

（1）iconmoon字體圖標庫：https://icomoon.io/app

（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/

（3）font-awesome字體圖標庫：

3.字體圖標使用步驟

以iconmoon為例

（1）選擇需要的圖標并下載

1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。

2）字體轉換

https://www.fontke.com/tool/convfont/

（2）字體圖標的引入

1）把字體放到項目的相應位置

將下載解壓后的fonts文件夾放到項目路徑下

2）在html頁面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標簽中引入如下代碼：

@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）為元素添加內容

復制demo.html中需要的圖標，如下，將其作為元素的內容。

<span>?</span> 

（3）新增字體圖標的引入

當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。