css基础—字体那些事

Youngs 发布于2019-08-30 14:21 / 3099人阅读

摘要：因为网页中可能存在中英文，中英文的字体样式不同。要首先写英文字体，在写中文字体。上下移动目前可以使用文本修饰下划线删除线上划线无字间距词间距字间距词间距和共同使用强制换行由于中文会强制换行，但是因为英文和数字不会强制换行。

css基础—字体那些事

1. 首先讲字的大小样式等

字体大小 font-size: 40px;

文字字体 font-family: "宋体",Arial;

文字样式 font-style:normal;

    -normal:正常字体
    -italic，oblique:斜体

字体加粗 font-weight: bold;

每行所占高度（行高） line-height: 50px;

疑问一: 文字字体怎么会同时写两个值？
解答:
是首选和备选的关系，不只可以写两个，还可以写多个。放在第一个位置的是首选，后面的是备选。因为网页中可能存在中英文，中英文的字体样式不同。
font-family：首选，备选1，备选2.....

注意：当网页上存在中文和英文的时候。要首先写英文字体，在写中文字体。因为中文字体库包含英文，英文字体库不包含中文。

疑问二：行高是什么？用来干什么的？
解答：转答案在这里，别人的博文和再看一篇会更懂，也是别人的博客
line-height用来控制文字垂直方向上的位置。

2. 字体相关属性

字体颜色 color:red;

首行缩进 text-indent: 2em;或者 text-indent: 32px;

文本水平方向对齐 text-align:文本对齐

- 属性值有3个：left，center，right。
- 只能靠左，居中，靠右。
- 上下移动目前可以使用line-height.

text-decoration:文本修饰

underline 下划线

line-through 删除线

overline 上划线

none 无

字间距:letter-spacing:10px;

词间距:word-spacing:10px;

字间距+词间距:
letter-spacing:10px;和word-spacing:10px;共同使用

强制换行：word-break:break-all;
由于中文会强制换行，但是因为英文和数字不会强制换行。

英文和数字不会自动换行


   
   
   
       
       Title
       
   
   
      
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
      
      
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111

强制不换行：white-space：nowrap；
点击查看强制不换行

注意：词间距的使用

eg:
1.我爱学习
2.我爱学习

对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词，给了空格才知道。

查看词间距使用效果

词间距和字间距同时使用时，注意实际效果：
eg：我爱学习。设置字间距为20px，词间距为50px。
实际效果为：
我-20px-空格-20px-50px-爱

词间距和字间距共同使用的效果





    
    Title
    



我爱学习

我 爱 学 习

我 爱 学 习

GPU云服务器云服务器云服务器那些事 css字体库 css 服务器字体 css3服务器端字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115962.html

css基础—字体那些事

摘要：因为网页中可能存在中英文，中英文的字体样式不同。要首先写英文字体，在写中文字体。上下移动目前可以使用文本修饰下划线删除线上划线无字间距词间距字间距词间距和共同使用强制换行由于中文会强制换行，但是因为英文和数字不会强制换行。 css基础—字体那些事 1. 首先讲字的大小样式等字体大小 font-size: 40px; 文字字体 font-family: 宋体,Arial; 文字样式...

pkhope 2019-08-02 10:06 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0