From e50e10efe05f2d7988f08bf30c6a2f0c5aaeac77 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 16 Oct 2019 14:42:38 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E5=90=84=E5=A4=A7=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E7=9A=84=E9=BB=98=E8=AE=A4=E5=AD=97=E4=BD=93=E5=8A=A0=E7=B2=97?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../02-网页设计和开发中，关于字体的常识.md | 40 +++++++++++++++++-- 03-CSS进阶/CSS开发积累.md | 11 +++++ 2 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 03-CSS进阶/CSS开发积累.md diff --git a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md b/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md index 339485b..b4c8f74 100644 --- a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md +++ b/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md @@ -44,7 +44,7 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类： -- serif:衬线体。 +- serif：衬线体。 - sans-serif：无衬线体。 - monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。 - cursive：手写字体。比如徐静蕾手写体。 @@ -102,7 +102,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你 font-weight: 900; font-weight: normal; // 相当于 400 - font-weight: bold; // 相当于 900 + font-weight: bold; // 相当于 700 ``` @@ -119,6 +119,38 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你 ![](http://img.smyhvae.com/20191013_1100.png) +## 各大平台的默认字体加粗效果 + +一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。我想，像我这样贴心的前端，不多见了。 + +**1、Mac 平台的默认字体加粗效果**：（苹方字体） + +![](http://img.smyhvae.com/20191016_1205_mac.png) + +**2、Windows 平台的默认字体加粗效果**：（微软雅黑字体） + +![](http://img.smyhvae.com/20191016_1205_windows2.png) + +**3、iOS 平台的默认字体加粗效果**：（苹方字体） + +![](http://img.smyhvae.com/20191016_1205_ios.png) + +可以看出，“苹方”字体的500 和600，加粗效果是不同的。 + +**4、Android 平台（华为 P30 Pro）的默认字体加粗效果**：（Droid Sans 字体） + +![](http://img.smyhvae.com/20191016_1205_huawei_p30_pro.jpeg) + +可以看出，Android 平台的 Droid Sans 字体，只有 `>=700`，才会加粗。 + +**总结**：（各大平台的默认字体加粗效果） + +- Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。 + +- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗；而且只有一种加粗效果。 + +- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且只有一种加粗效果。 + ## 大部分字体不是免费的 有一点你需要知道：你所见到的大部分字体，都不是免费的。换句话说，如果你想用第三方字体从事商业活动，要先交钱，获得授权后才可以使用。你在给公司做网页的时候，就是一种商业行为。 @@ -135,7 +167,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你 这个时候，前端同学要马上告诉产品或者设计师，不要用这个字体，因为它是商用字体，是要收费的，小心吃官司。那我们该用什么字体呢？接着往下看。 -### 网页一般用什么字体 +## 网页一般用什么字体 大多数情况下，网页使用系统默认的字体就足够了。如果要使用特殊字体，顶多只是让**阿拉伯数字**使用特殊字体。中文和英文，使用默认字体，完全足够。 @@ -187,7 +219,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你 ## 最后一段 -一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。 +一个再不起眼的知识点，也是有很多学问的，有个成语叫「见微知著」。光是“字体”这一点，就足够成为一门学科。 2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话： diff --git a/03-CSS进阶/CSS开发积累.md b/03-CSS进阶/CSS开发积累.md new file mode 100644 index 0000000..3c7d67b --- /dev/null +++ b/03-CSS进阶/CSS开发积累.md @@ -0,0 +1,11 @@ + + +### 让文字只显示一行，超出显示省略号 + +```css + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + +``` +