前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css教程之文本字体

css教程之文本字体

作者头像
老雷PHP全栈开发
发布2020-07-02 15:11:28
1.2K0
发布2020-07-02 15:11:28
举报
文章被收录于专栏:老雷PHP全栈开发

css教程之文本字体

一、字体

1、font-size 字体大小

代码语言:javascript
复制
div{font-size:16px;}

2、font-weight 字体粗细

normal 正常的字体。相当于数字值400

bold 粗体。相当于数字值700。

bolder 定义比继承值更重的值

lighter 定义比继承值更轻的值

<integer>:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

代码语言:javascript
复制
div{
      font-weight:600;
}

3.font-family 字体名称

代码语言:javascript
复制
div{font-family: helvetica, verdana, sans-serif;} 

4.font-style:normal | italic | oblique 字体样式

代码语言:javascript
复制
div{
      font-style:italic;
    }

5.字体颜色 color

代码语言:javascript
复制
div{color:#f60;}

二、文本Text

1.white-space 指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。

normal 默认处理方式

pre 原封不动的保留你输入时的状态

nowrap:强制所有文本在同一行内显示

2.word-break 定义元素内容文本的字间与字符间的换行行为

normal:

默认的换行规则。依据各自语言的规则,允许在字间发生换行。

keep-all:

对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal

break-all:

对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。

3.text-align 定义元素内容的水平对齐方式。

left:内容左对齐。

center:内容居中对齐。

right:内容右对齐。

4.word-spacing 指定单词之间的额外间隙

p{word-spacing:20px;}

5.letter-spacing 指定字符之间的额外间隙

p{letter-spacing:10px;}

6.text-indent 定义块内文本内容的缩进

p{text-indent:20px;}

7.vertical-align

定义行内元素在行框内的垂直对齐方式 span/a/em/label

baseline:把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐

sub:把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)

super:把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)

text-top:把当前盒的top和父级的内容区的top对齐

text-bottom:把当前盒的bottom和父级的内容区的bottom对齐

middle:把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐

top:把当前盒的top与行盒的top对齐

bottom: 把当前盒的bottom与行盒的bottom对齐

8.line-height 定义元素中行框的最小高度

9. text-decoration 文本装饰

text-decoration:none | underline | overline | line-through | blink

10.text-overflow

clip 当内联内容溢出块容器时,将溢出部分裁切掉。

ellipsis 当内联内容溢出块容器时,将溢出部分替换为(...)。

代码语言:javascript
复制
    p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}
代码语言:javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本字体</title>
    <style>
      .text{
        height: 100px;
        font-family: helvetica, verdana, sans-serif;
        font-size:24px;
        font-weight:bolder;
        font-style:italic;
        color: #0F8E82;
        text-align:center;
        word-spacing:20px;
        letter-spacing:10px;
        text-indent:20px;
        line-height:100px;
        
      }
      span{
        vertical-align:top;
        text-decoration:underline;
      }
      .text-over{
        width: 100px;
        height: 30px;
        overflow: hidden;
        white-space:nowrap;
        word-break:break-all;
        text-overflow: ellipsis;
      }
</style>
  </head>
  <body>
    <div class="text">
      <div>字体abc abc</div>
      <div>aa<span>bb</span></div>
    </div>
    <div class="text-over">
      textoverflowtextoverflowtextoverflow
    </div>
  </body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 老雷PHP全栈开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档