add: 各大平台的默认字体加粗效果
This commit is contained in:
parent
aa7b7a2dc9
commit
e50e10efe0
@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类:
|
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类:
|
||||||
|
|
||||||
- serif:衬线体。
|
- serif:衬线体。
|
||||||
- sans-serif:无衬线体。
|
- sans-serif:无衬线体。
|
||||||
- monospace:等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
|
- monospace:等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
|
||||||
- cursive:手写字体。比如徐静蕾手写体。
|
- cursive:手写字体。比如徐静蕾手写体。
|
||||||
@ -102,7 +102,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
|
||||||
font-weight: normal; // 相当于 400
|
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)
|
![](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)在斯坦福大学的毕业典礼演讲上,有过这样一段话:
|
2005年,苹果公司创始人乔布斯(Steve Jobs)在斯坦福大学的毕业典礼演讲上,有过这样一段话:
|
||||||
|
|
||||||
|
11
03-CSS进阶/CSS开发积累.md
Normal file
11
03-CSS进阶/CSS开发积累.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
### 让文字只显示一行,超出显示省略号
|
||||||
|
|
||||||
|
```css
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
```
|
||||||
|
|
Loading…
Reference in New Issue
Block a user