CSS3学习笔记-字体和文字

字体

字体族font-family

通常需要给处字体栈以适应不同机器间的适配，多单词字体需要用引号

body{font-family:"trebuchet ms", tahoma, sans-serif;
}

serif和sans-serif是最保险的方法

字体大小

设置font-size:62.5% 1em=10px

em单位的相对大小会逐层复合

rem 相对于根元素的字体大小，不支持ie8极其以下的浏览器

字体样式

font-style:italic normal oblique

html中可以直接使用标签做到italic斜体的效果，斜体在英文中表示强调

字体粗细

font-weight 主要bold 和normal html中可以使用标签

字体变化

font-variant: small-caps 和normal small-caps用来将字母转换为小型大写字母

简写

注意：必须声明font-size和font-family。且声明时其他属性不分先后，font-size倒二，font-family最后声明

在设置字体大小时，可以顺便设置行高，如12px/1.5

word-wrap

normal | break-word 将内容在边界内换行

word-break

normal | break-all（中断单词） | keep-all（保留单词）

white-space

normal（无视空白符）| pre（保留空白符） | nowrap （文本不会换行，直到碰到 标签）| pre-line （合并空白符）| pre-wrap （保留空白符，正常换行）

文本属性

文本缩进text-indent

注：子元素文本会继承父元素的文本缩进。文本元素只作用于文本内容，不作用于包裹文本元素的盒子。

在设定缩进和外边距时要使用em,以便用户改变字体大小时，它们能等比变化

字符间距letter-spacing

正值增大，负值缩小，缩小标题的字符间距能够让网页显得更专业

单词间距word-spacing

文本装饰text-decoration

line-height行高，修改默认行高的快捷属性就是在font中应用：

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

文本转换text-transform

normal uppercase lowercase capitalize(首字母大写)

text-overflow

clip | ellipsis文本溢出显示省略标记

text-overflow要在一定的高度范围内配合overflow:hidden才能生效

.text{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

垂直对齐vertical-align

sub super top middle bottom

以基线为参照上下移动文本，只影响行内元素。注：如果想影响块级元素，需使用Inline或Inline-block。

常用于文字上标及下标，脚注等，html标签有上标和下标，重新设置font-size和vertical-align会达到更好的效果

Web字体@font-face

（1）@font-face 中的font-family仅用于元素中font-family的引用

（2）应用多个字体就启用多个@font-face规则

（3）src属性会依次获取字体的来源

（4）可以使用字体图标

在::before和::after的content的元素中引用html实体，需要将十六进制的改写为\201C这样的形式

html5 的<blockquote>用于表示被引用的文本，<quote>用于将文本的开头和末尾加上双引号

转载于:https://www.cnblogs.com/goOtter/p/9655907.html

CSS3学习笔记-字体和文字相关推荐

前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
HTML5与CSS3学习笔记
HTML与CSS学习笔记 HTML5 1.标签简单的网页的基本结构 <html><head><title>我的网页<title/></head& ...
css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型
✨课程链接 [狂神说Java]CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili ✨学习笔记盒子模型 Title /* body 总有一个默认的外边距 */ /* 常见操作 */ body ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
CSS3学习笔记（3）—左右飞入的文字
前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软 ...

CSS3学习笔记-字体和文字

CSS3学习笔记-字体和文字相关推荐

最新文章

热门文章