果苹方字体

苹果苹方字体是一款艺术字体，深受广大设计师的喜爱。

苹果苹方字体是苹果为中国用户打造的一款富有中国元素的中文字体，这套字体不仅字型优美，而且也能提升在手机、电脑屏幕上的清晰度以及易读性。这套字体包含简体以及繁体中文，共有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文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。