文本 字体 常用字体详解

文本属性是什么

文本属性用于控制一段文本的外观。

文本属性列表

属性 描述
text-align 规定文本的水平对齐方式
text-decoration 规定文本装饰
text-shadow 添加文本阴影
text-indent 规定文本块(text-block)中的的首行缩进
text-transform 控制文本大小写
word-spacing属性 文本之间的空白。
letter-spacing属性 控制字符之间的间距
text-overflow属性 文本溢出隐藏

text-align属性

定义
定义文本的水平对齐方式。(不能控制垂直)
语法

  container{
  text-align:参考属性值;
  }

text-align: left | center | right | justify
}</pre>

属性值 left : 规定文本左对齐。默认值 center: 规定文本水平居中对齐。 right: 规定文本右对齐。 justify: 规定文本两端对齐。

text-decoration属性

定义 定义文本修饰线。

语法

.container{
  text-decoration:参考属性值;
}

属性值

  • overline: 添加上划线

  • line-through : 添加删除线

  • underline: 添加下划线

  • none: 取消修饰线。默认值

text-shadow属性

定义 定义文本阴影。

语法

  .container{
  text-shadow:参考属性值;
}

属性值

  • x-offset: 设置水平偏移。单位是像素。正直向右,负值向左。

  • y-offset:设置垂直偏移。单位是像素。正值向下,负值向上。

  • blur: 设置模糊半径。数值越大越模糊。

  • color:设置阴影的颜色。

text-indent属性

定义 定义文本缩进。

语法

  .container{
  text-indent:参考属性值;
}

属性值

  • 相对值:

    • em: em表示一个字符,使用字符设置文本缩进。缩进2个字符,就是2em。 推荐

    • rem

    • %

    • vh/vw

  • 绝对值

    • px:使用像素设置文本缩进。不推荐。

text-transform属性

定义 定义英文字母的小写转换。

语法

  .container{
  text-transform:参考属性值;
}

属性值

  • none : 默认值。对原字母不进行转换。

  • capitalize:文本中的每个单词以大写字母开头。(转成大写字母开头)

  • uppercase: 定义仅有大写字母。(全部转成大写字母)

  • lowercase: 定义无大写字母,仅有小写字母。(全部转成小写字母)

字体属性

字体属性是一个设置字体的样式

字体属性列表

属性 描述
font-family属性 指定元素的字体名称或字体家族名称。
font-size属性 设置页面字体的大小。
font-weight属性 定义页面字体的粗细。字体的粗细共有9个级别。从100 - 900
line-height属性 设置字体行高。
font-style属性 用于定义字体风格。风格指字体是否倾斜。
font-variant属性 定义小型大写字母。
font复合属性 font复合属性用于把多个字体属性写在一个声明里。
@font-face规则 它允许网页开发者为其网页指定在线字体

@font-face

定义:

用户定义元素的自定义字体

什么是自定义字体?

自定义字体是非系统字体。也是非安全字体

创建自定义字体

1.确定路径:把自定义字体文件复制到项目项目下

1.2确定文件位置:引用在线字体。在线字体使用绝对地址来引用字体文件

2.添加:使用@font-face规则把自定义字体文件添加到本地字库系统中

3.引用:使用font-family引入自定义字体。

什么是安全字体?

安全字体就是系统字体

系统字体就是安全字体

设置font-family首选安全字体

自从@font-face规则出现后我们可以在页面引入非安全字体

语法

@font-face{/*大括号:设置引入自定义字体规则*/
 /*font-family 是规则符,不是属性。用于描述向系统字体列表中添加新字体的名称*/
 font-family:'自定义字体名称';
 /*url:是指定自定义文件的路径(相对路劲/绝对路劲)*/
 url('自定义字体文件'.otf);
}
body{
 font-family:'serif';
}

/*第二步:向元素应用自定义字体*/
#logo h2{
 font-family:;
}
}

6.自定义字体免费字库

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容