通过Link标签在网页头部引用Google Web Font:

字体：Noto Sans SC

大小：100, 300, 400, 500, 700, 900

在需要使用思源黑体的地方设置CSS样式：

TIP：Link标签的rel属性的全称是relationship，表示引用内容与当前HTML的关系。

http://andour.me/2017/04/08/Typora-修改中文字体.html

可以参考一下，这里面是改的微软雅黑，步骤很清楚

你要改思源黑体的话，首先要记得自己的电脑有这个字体，具体看你的系统（可以搜索字体设置查看）

打开字体设置之后，查找到你要用的那个字体文件的名字，然后按照上面教程的步骤 把 微软雅黑 改成那个名字就好了。

至于居中问题

text-align: center

加上这一句就好了，记得在写了从h1一直到h6的里面写（当然你在每个h里面写也可以，更保险）

如图：

这时设计会向前端抱怨屏幕显示的效果与自己的设计不符，前端也表示很无辜，这是按照设计要求实现的，怎么能怪我？

可能对大多数用户来说，没法一眼识别哪里存在差距，但细微差距的集合，对用户的整体感官差距完全是不同的。这些细微差距体现在很多方面，其中，字体就是一个纠结的地方，很难说清，但影响又无处不在。

字体的分类、历史

首先，先来介绍一下字体的分类和历史，在西方国家的字母体系，分成两大字族：

serif（衬线字体）

sans serif（无衬线字体）

英文字体

衬线字（如图中的 Times New Roman）是指在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有所不同。起始和结束装饰的不同，能设计出不同风格的字体。

无衬线体（如图中的 Helvetica），没有这些额外的装饰，而且笔画粗细差不多。字形更加趋于理性，用户很难从字体的外形看出字体要表达的性格，感情。

中文字体

在中文字体中，宋体是比较标准的 serif 字体，衬线的特征比较明显。

无衬线字（如图中的思源黑体）就没有这些额外装饰，而且笔画粗细大致上是差不多。

字体的特点、如何选择

介绍了字体的分类和历史，接下来就是考虑具体使用的场景，如何选择合适的字体呢？

在平面印刷，杂志，企业 Logo 中，需要考虑：

表达的性格和感情

引起他人的关注，吸引眼球

因此，往往会使用 特殊的衬线体或者特殊设计字体。

在电子屏幕的场景下，更多的考虑：

清晰度

长时间下，是否容易视觉疲劳

不同字体大小是否会影响字体清晰度

在这些因素的考虑下，无衬线体没有边角的修饰，结构简单清晰，在同等字号下，无衬线的字体看上去比有衬线更大，结构更清晰的特性，更加适合屏幕。也不会因为字体本身结构笔划，影响文字内容的情感态度表达。无衬线体带来的性格，立场就是中性的，在需要大量排版阅读的文字网站中，就像空气一样，我们不会在意文字本身设计的影响。因此，更应该使用 无衬线体。

不同浏览器如何实现字体的技术

字体的选择，这是设计阶段需要考虑的事情，但如何做到屏幕显示和设计一样呢？我们需要了解不同浏览器实现显示的一些原理技术。

先介绍一下点阵字体与矢量字体：

点阵字体

点阵字体也叫位图字体，其中每个字形都以一组二维像素信息表示。

由于位图的原故，点阵字体很难进行缩放，特定的点阵字体只能清晰地显示在相应的字号下。但对于 12-16px 这样小的汉字，点阵字体常常比其它类型的字体在屏幕上更好的显示效果。

常见的点阵字体有 bdf，pcf，fnt，hbf 等格式。

对于常见的计算机操作系统，字体的显示算法需要一些字体的信息来优化屏幕显示效果，英文称为 hinting。汉字由于笔画复杂，所以 hinting 的方式与西文截然不同。使用在汉字字体中嵌入预先制作的点阵位图既可以有效地避免 hinting 算法带来的计算开销，同时屏幕上显示的汉字边缘清晰，易于阅读。

矢量字体

矢量字体中每一个字形是通过数学曲线来描述的，它包含了字形边界上的关键点，连线的导数信息等，字体的渲染引擎通过读取这些数学矢量，然后进行一定的数学运算来进行渲染。

这类字体的好处是字体可以无限放大而不产生变形。

矢量字体主要包括 Type1 和 TrueType 等几类。

系统的偏好

Windows

默认是使用很重的 hinting，直到 DirectWrite 开始才禁用 horizontal hinting

字体渲染强调文字的锐利和清晰

在操作系统介面和网页正文等小字号的地方比较清晰，但大幅牺牲字体的原貌

Mac OS X

完全不用 hinting 信息，只在 vertical 方向做一些 autohint

字体渲染强调忠实字体设计，最大化保留字体的外形

边缘平滑是为了更好地传递字体设计中的曲线等细节，而小字号时显得模糊也是在此方针下的妥协

最佳实现

考虑到 css 的“优雅降级”原则，默认我们先把 Mac OS 的字体放在最前面，中文 "PingFang SC-light"，英文 "Helvetica Neue"，降级备用字体 "Hiragino Sans GB" 和 "Helvetica"，最后考虑基础 Windows 系统自带的字体 "Microsoft YaHei" 和 "Arial"。

font-family:"PingFangSC-light","Helvetica Neue",“Hiragino Sans GB”,“Helvetica”,“Microsoft YaHei”,“Arial”

1

2

1

2

字体设计是整个界面设计的一部分，我们很难意识到它的重要性，就像我们不会在意空气和水，但它的作用不容忽视。

参考链接

hunting引用

更多专业前端知识，请上 【猿2048】www.mk2048.com

原文链接：https://www.mk2048.com/blog/blog.php?id=0bhb2jjakj&title=%E4%B8%80%E8%B7%AF%E8%B5%B0%E6%9D%A5%E7%9A%84%E2%80%9C%E5%AD%97%E4%BD%93%E2%80%9D

打开CSDN，阅读体验更佳

热门推荐 大学一路走来，学习互联网全靠这几个网站，最终拿下了一把offer

大佬原来都是这样炼成的

继续访问

互联网行业一路走来的小计（持续更新中.......）

用过的代码编译器、插件和图标样式

继续访问

vue,一路走来（2）--路由vue-router

安装Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中： 自己觉得mint-ui的文件介绍不是很详细，简单介绍一下我遇到的问题吧！ 1.Swipe 轮播图：记得一定要给个高度 <!--轮播图--><div clas...

继续访问

OC Extension Font(字体宏定义)

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 很多人在开发过程中会针对公司的需求都会对字体做一个宏定义的封装。方便日后的使用。下面简单的写一下。 #ifndef FontHeader_h #define FontHeader_h //kFont #define kFont_10 [UIFont systemFontOfS

继续访问

分享一组矢量图标–UX图标字体库

科技日新月异的今天，市面上各种分辨率、各种显示精度的显示设备层出不穷，在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求；如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示（new ipad）上展现就不尽人意了。那这么多的显示设备，那么多的图标尺寸设计师难道要一个一个去优化去设计吗？

继续访问

Linux gvim 编辑器修改配色方案、字体、字号

1. gvim相比于vim，目前知道gvim是可以单独窗口运行的，像gedit一样。vim打开的文件貌似只能显示在终端内。但是二者安装的位置以及配置文件是很有联系的，暂时的感觉是gvim是对vim的封装，对vim配置文件的修改也影响到gvim。（都仅仅是感觉而已，说错不要拍砖） 2. 通过apt-get install vim-gtk安装gvim后，发现原生态的配色有点惨不忍睹，遂即g...

继续访问

win7字体放大不放大窗口_放大不确定的未来

win7字体放大不放大窗口 介绍 (Introduction) A little while back, I wrote an article for Data Driven Investor. It addressed a subject that one might rightly say should be off-limits for public discussion today, an...

继续访问

一段字体CSS

　花开了就欢喜，花谢了就放弃，陪你一路走来满心欢喜，是因为风景也是因为你。 1. 工作室介绍2. 工作室成员介绍 Name: KinaSex: FemaleBirth: 1984.6.8 Location: ShanghaiLiking: Designing, drawing and writingDream: Hav

继续访问

后台界面设计之表单设计规范参考

前言 在后台界面设计之表格设计规范参考一文中，我们对表格中内容的布局、数据的展示、操作项的罗列进行了详细的讲解，本文将对表单的设计规范做一个参考性的建议。 表单是中后台系统最常见的元素模块之一，承载了各个流程中信息数据的录入使命。提高信息数据录入的效率可以加速用户达成目标的时间与降低操作成本。 一般要求在录入前尽可能的使用户理解信息录入的目的与预测并判断需要录入的信息内容，在录入过程中尽可能的减少输错概率并帮助用户快速达成，在录入后即时纠错提示并避免繁复操作等。 1.基本样式 1.1 颜色 使用色彩系统设定

继续访问

Android开发未来的出路何在

Android开发的现状 目前，移动开发已经处于饱和的阶段，Android开发也不如当年盛况，已经不再像前几年前那么火爆。正如一种编程语言如果经历过盛极一时，那么必然有这样的一条曲线，像我们学的正弦曲线先急速上升，然后到达顶点，然后再下降，最后再趋近一个平稳的值。 可以看到，从2016年的下半年开始，移动互联网基本处于缓慢发展的阶段，很多大佬称之为互联网的下半场。如果移动互联网的前半场是粗放式的强...

继续访问

SaaS前世今生：老树开新花

戳蓝字“CSDN云计算”关注我们哦！作者 |文东海出品 | CSDN云计算（ID：CSDNcould）2019年3月26日，Adobe和微软宣布，两家公司准备展开一项合...

继续访问

CSDN 一路走好 之Wiki与Blog

CSDN一路走来，从无到有，慢慢地，慢慢地，他什么都要做了频道开的一天天多，但是定位呢？开起来了，火几天，灭了。长久来，就累积了不少垃圾，如前文所述。今天来说说Wiki，Wiki是个好东西，但是CSDN用来做什么呢？就摆个程序放在那里，是不是浪费，坦白地说，很多人就三分钟热度，，今天戳几笔明天戳几笔，后天走人了到后来，这个Wiki就成了个垃圾站，徒劳地浪费了带宽 和 服务器。来，随便抓个页面佐

继续访问

Sublime Text 3 全程详细图文原创教程

Sublime Text 3 全程详细图文原创教程（持续更新中。。。） 一、 前言使用Sublime Text 也有几个年头了，版本也从2升级到3了，但犹如寒天饮冰水，冷暖尽自知。最初也是不知道从何下手，满世界地查找资料，但能查阅到的资料，苦于它们的零碎、片面，不够系统和全面，所以一路走来，耗费了本人大量的时间和精力。所以蒙生了写这篇《Sublime Text 3

继续访问

OC 基础 Label

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.常用属性 属性 注释 frame 约束 text 文本内容 numberOfLines 设置行数 textColor 文本颜色 backgroundColor 背景颜色 font 文字大小 textAlignment 对齐方式 en

继续访问

[Android] 环境配置之正式版Android Studio 1.0

昨天看见 Android Studio 1.0 正式版本发布了；心里挺高兴的。 算是忠实用户了吧，从去年开发者大会一开始出现 AS 后就开始使用了；也是从那时开始就基本没有用过 Eclipse 了；一路走来，遇到过 BUG ，也不断的去国外找资源 找解决办法。总的来说挺好的；有些回忆。 这里不讲具体的源码编辑，只是讲怎么下载配置直至简单的使用。

继续访问

webpack

parcel开发第三方包的时候用的比较多，webpack做项目的时候用的比较多遇到的问题：ES6导入语法import在浏览器中报错，不兼容ES6疑问：这里js文件要在src下，不能在src的js下，否则报错，why解决: 因为webpack默认的入口是src/index.js文件 所以要改的话，得进行配置，后面会涉及到怎么配置。在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

继续访问

最新发布 iText7高级教程之html2pdf——5.自定义标签和CSS应用

假设我们想向不同的人发送邀请函。和，html文件内容如下：

继续访问

React 编写网页聊天界面（仿钉钉）

React 编写网页聊天界面（仿钉钉）

继续访问

5-前端笔记-CSS-Emmet语法

Emmet语法

继续访问

前端

操作系统

Mac