css3总结(3)字体，文字，文本

程序员文章站 2022-03-26 23:18:59

...

字体

font-family设置字体系列

定义文本的字体系列，使用通用字体系列。
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}

实例使用方法，例如：

div{
font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;}

注，如果字体名中有一个或多个空格或其他字符是需要用单引号。
字体说明：
我们平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。

（1）font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
（2）Mac OS X系统有一款比Tahoma更典雅的系统默认字体：Helvetica，非Mac系统的Helvetica字体都是Rip版。

font-style设置字体斜体

用于规定斜体文本。
该属性有三个值：
normal文本正常显示
italic文本斜体显示
oblique文本倾斜显示

代码如下：

.mydiv1{
 font-family: 'Times New Roman', Times, serif;
 font-style: italic;
}

font-variant设定小型大写字母

可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
实例如下：

 <span class="mydiv1">hello我的字体设置</span>hello,HELLO
 <style>
 .mydiv1{
font-variant: small-caps;
}
 </style>

css3总结(3)字体，文字，文本

color设置字体颜色

有如下三种方式这种颜色
（1）color:red;颜色名称
（2）color:rgb(255,255,0);使用rgb颜色
（3）color:#ff5200;使用十六进制设置字体颜色。

font-weight设置字体加粗

加粗字体可以使用或标签，两者效果相同。
对象值从100到900，最常用的font-weight的值为bold，值有如下：
（1）normal正常的字体，相当于400
（2）bold粗体，相当于700，也相当于标签的作用
（3）bolder特粗体
（4）lighter细体
（5）可以设置number值包括：100、200、300、400、500、600、700、800、900

@font-face

设置自定义字体，我们可以在网页中显示一些特殊字体，需要把字体放入网页的目录中，在src中指向字体路径。
语法：
@font-face{
font-family:自定义字体名称;
src:字体路径，多个字体用逗号隔开;
}
实例：

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
h1
{
font-family:myFirstFont;/*调用字体*/
}
</style>

补充：
说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face {
font-family: ‘YourWebFontName’;
src: url(‘YourWebFontName.eot?’) format(‘eot’);/IE/
src:url(‘YourWebFontName.woff’) format(‘woff’), url(‘YourWebFontName.ttf’) format(‘truetype’);/non-IE/
}
但为了让各多的浏览器支持，你也可以写成：

@font-face {
font-family: ‘YourWebFontName’;
src: url(‘YourWebFontName.eot’); /* IE9 Compat Modes /
src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘YourWebFontName.woff’) format(‘woff’), / Modern Browsers /
url(‘YourWebFontName.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); / Legacy iOS */
}
说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体：
HTML Code:

Neues Bauen Demo

通过@font-face来定义自己的Web Font:

@font-face {
font-family: ‘NeuesBauenDemo’;
src: url(’…/fonts/neues_bauen_demo-webfont.eot’);
src: url(’…/fonts/neues_bauen_demo-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(’…/fonts/neues_bauen_demo-webfont.woff’) format(‘woff’),
url(’…/fonts/neues_bauen_demo-webfont.ttf’) format(‘truetype’),
url(’…/fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去：

h2.neuesDemo {
font-family: ‘NeuesBauenDemo’
}
效果：

看到上面的效果，我想大家会感到@font-face很神奇，同时也想争着做做看，可是一动手才发现，特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么我们就带着这些问题来一个全程完成的实例吧：

一、获取特殊字体：

我们拿下面这种single Malta字体来说吧：

要得到single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方，这个Demo使用的是Dafont.com的Single Malta字体，这样就可以到这里下载Single Malta：

Single Malta下载下来后，需要把它解压缩出来：

二、获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说，首跟我点这里进入到下面这个界面吧。

如果你进入页面没有看到上图，你可以直接点击导航:

如果你看到了上面的界面，那就好办了，我们来看如何应用这个工具生成@font-face需要的各种字体，先把我们刚才下载的字体上传上去：

上传后按下图所示操作：

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了，接着只要对他进行解压缩，你就能看到文件列表如下所示：

大家可以看到，解压缩出来的文件格式，里面除了@font-face所需要的字体格式外，还带有一个DEMO文件，如果你不清楚的也可以参考下载下来的DEMO文件，我在这里不对DEMO说明问题，我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。

例如在自己的本地创建了一个fontface项目：

为了让项目结构更清晰，我们在项目中单独创建一个fonts目录，用来放置解压缩出来@font-face所需的字体格式：

现在@font-face所需字体已经加载到本地项目，现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face {
font-family: ‘SingleMaltaRegular’;
src: url(’…/fonts/singlemalta-webfont.eot’);
src: url(’…/fonts/singlemalta-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(’…/fonts/singlemalta-webfont.woff’) format(‘woff’),
url(’…/fonts/singlemalta-webfont.ttf’) format(‘truetype’),
url(’…/fonts/singlemalta-webfont.svg#SingleMaltaRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
到这里为止，我们已经通过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把自己定义的字体应用到你的Web中的DOM元素上：

h2.singleMalta {
font-family: ‘SingleMaltaRegular’
}
效果：

看到上面的效果，那大家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体，到这里基本上就完成了，我在这里需要提醒使用者：

1、如果你的项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

2、致命的错误，你在@font-face中定义时，文件路径没有载对；

3、你只定义了@font-face，但并没有应用到你的项目中的DOM元素上；

以上几点都是在平时制作中常出现的问题，希望大家能小意一些，另外我们没有办法在购买所有字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

最后在提醒一下，使用@font-face别的可以忘了，但Font Squirrel千万不能忘，因为他能帮你生成@font-face所需的各种字体格式。

谷歌字体：
https://www.dafont.com/
字体格式生成器：
https://www.fontsquirrel.com/tools/webfont-generator

文本效果

text-indent实现文本缩进

通过属性text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负数。
例如将段落文字首行缩进5em，如下：

p{text-indent:5em;}

当为负数时可以实现很有趣的悬挂缩进，如下：

p{
  border: 1px solid red;
  text-indent: -2em;
  padding: 2em;
  width: 200px;
  text-align: left;
}

css3总结(3)字体，文字，文本
还可以使用百分比。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：

<style>
div {width: 500px;}
p {text-indent: 20%;}
</style>
<div>
<p>this is a paragragh</p>
</div>

text-align文本对齐

您可能会认为 text-align:center 与

元素的作用一样，但实际上二者大不相同。

不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

它的值包括：
（1）left 文本左对齐
（2）right 文本右对齐
（3）center 文本居中对齐
（4）justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

实例：

.p1{
  text-align: justify;
}
.p2{
  text-align: left;
}

word-spacing改变字（单词）之间的标准间隔

其默认值是normal与设置值为0是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
实例：

<p>Rainbond hello world 你好啊，我很好啊 我加一个空格？</p>
<style>
p{
  width: 200px;
  border: 1px solid red;
  text-align: left;
word-spacing: 30px;
}
</style>

css3总结(3)字体，文字，文本
综上所述，word-spacing只对空格起效果。
上述例子中，word-spacing:-30px;效果如下：

letter-spacing修改的是字符或字母之间的间隔

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：
实例：

<p>Rainbond hello world 你好啊，我很好啊!</p>
<style>
p{
  width: 200px;
  border: 1px solid red;
  text-align: left;
letter-spacing: 30px;
}
</style>

效果如下：
css3总结(3)字体，文字，文本
上述例子中letter-spacing:-3px;效果如下：

text-transform字符转换

用来处理文本的大小写，属性值如下：
(1)none对文本不做任何改动
(2)uppercase将字母全都转换成大写
(3)lowercase将字母全都转换成小写
(4)capitalize只对每个单词的首字母大写

实例,将所有字母转化为大写：

<p>This section is dedicated to the JavaScript language itself</p>
<style>
p{
  text-transform: uppercase;
}
</style>

css3总结(3)字体，文字，文本
实例,将所有字母转化为小写：

<p>This Section Is Dedicated to the JavaScript language itself</p>
<style>
p{
  text-transform: lowercase;
}
</style>

css3总结(3)字体，文字，文本
实例,将每个单词的首字母大写：

<p>this Section is DESIGN, to the JAVA language iT</p>
<style>
p{
  text-transform: capitalize;
}
</style>

css3总结(3)字体，文字，文本

text-decoration文本装饰

它的值包括：
（1）none关闭文本中的所有装饰，比如去掉下划线。
（2）underline对元素加下划线，和标签效果一样
（3）overline在文本的顶端画一个上划线
（4）line-through在文本中间画一个贯穿线，等价于html中和
（5）blink会让文本闪烁,目前没什么效果。
实例：

<p>SOA是一种面向服务的体系结构，是一个组件模型，它将应用程序的不同功能单元（称为服务）通过这些服务之间定义良好的接口和契约联系起来。</p>
<style>
p{
text-decoration: underline;
}
</style>

css3总结(3)字体，文字，文本

p{
text-decoration: overline;
}

css3总结(3)字体，文字，文本

p{
text-decoration: line-through;
}

css3总结(3)字体，文字，文本
同时还可以添加多种效果，想让文子既有上划线，下划线，删除线：
实例：

p{
  text-decoration: line-through overline underline;
}

css3总结(3)字体，文字，文本
使用标签样式如下：

<u>我爱学习javascript</u>
<strike>我爱学习HTML</strike>

css3总结(3)字体，文字，文本

white-space处理空白符

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。
它的属性值包括：
（1）pre-line合并空白符，保留换行符，允许自动换行
（2）normal合并空白符，忽略换行符，允许自动换行
（3）nowrap合并空白符，忽略换行符，不允许自动换行
（4）pre保留空白符，保留换行符，不允许自动换行
（5）pre-wrap保留空白符，保留换行符，允许自动换行

实例：normal,会把多个空白符合并为一个空白，并且忽略换行符，可以自动换行

<p>SOA架          构   中    有两个主
  要角色：和Provider       层则由SOA架构内
  的所有服务  所构成。</p>
  <style>
p{
white-space: normal;
}
</style>

css3总结(3)字体，文字，文本
实例：nowrap,会把多个空白符合并为一个空白，忽略换行符，不允许自动换行

<p>SOA架          构   中    有两个主
  要角色：和Provider       层则由SOA架构内
  的所有服务  所构成。</p>
  <style>
p{
white-space: normal;
}
</style>

css3总结(3)字体，文字，文本
实例：pre保留代码中的空白符和换行符，不允许自动换行，严格按照代码中排版显示

<p>SOA架          构   中    有两个主
  要角色：和Provider       层则由SOA架构内
  的所有服务  所构成。</p>
  <style>
p{
white-space: pre;
}
</style>

css3总结(3)字体，文字，文本

direction设置文本方向

它可以设置文本方向，它的属性值有如下：
(1)ltr默认，从左到右
(2)rtl从右到左
实例：

<p class="p1">我是中国人，我爱我的国我爱我的家!</p>
<p class="p2">我是中国人，我爱我的国我爱我的家!</p>
<style>
.p1{
direction: ltr;
}
.p2{
direction: rtl;
}
</style>

css3总结(3)字体，文字，文本

line-height文本行高

值包括：
（1）normal默认，设置合理的行间距
（2）line-height:2;设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
（3）line-height:24px;设置固定的行间距。
（4）line-height:200%;设置百分比，基于当前字体尺寸的百分比行间距。

text-shadow设置文字阴影效果

设置文本阴影效果。
它有4个参数。语法：
text-shadow:（第一个参数表示水平阴影的位置，可以是负数，必填）（第二个参数表示垂直阴影的位置，可以是负数，必填）（第三个表示模糊的距离，可选填）（第四个表示阴影的颜色，可选填）;

实例1投影效果：

<p class="p1">我是中国人，我爱我的国我爱我的家!</p>
<style>
p
{
text-shadow: 4px 4px 2px red;
}
</style>

css3总结(3)字体，文字，文本
实例2外发光效果：

p
{
text-shadow: 0px 0px 8px red;
}

css3总结(3)字体，文字，文本
实例3，可以设置多层阴影，用逗号隔开。

p{
text-shadow: 0px 0px 5px #fff,0px -5px 10px red,-5px -15px 10px blue,-5px -20px 10px orange;
}

css3总结(3)字体，文字，文本

word-wrap是否允许长单词换行到下一行

允许对长的不可分割的单词进行分割并换行到下一行。
它的属性值：
（1）normal 只在允许的断字点换行（浏览器保持默认处理）。
（2）break-word 在长单词或 URL 地址内部进行换行。
实例,使用normal时，长单词不会折行：

p{
word-wrap: normal;
}

css3总结(3)字体，文字，文本
使用break-word时，长单词会被折行：

p{
word-wrap: break-word;
}

css3总结(3)字体，文字，文本

word-break规定自动换行的处理方法。

规定自动换行的处理方法。提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
属性值包括：
（1）normal使用浏览器默认的换行规则。
（2）break-all允许在单词内换行
（3）keep-all只能在半角空格或连字符处换行
实例：

<p class="p1">Web pages or otherhostenvironments. website:https://blog.csdn.net/qq_42238554/article/details/89466306</p>

p{
word-break: break-all;
}

css3总结(3)字体，文字，文本
使用keep-all，只会在空格处换行。

p{
word-break: keep-all;
}

css3总结(3)字体，文字，文本

text-overflow规定当文本溢出包含元素时发生的事情。

规定当文本溢出包含元素时发生的事情。
它有如下属性值：
（1）clip修剪文本
（2）ellipsis显示省略符号来代表被修剪的文本。
实例，使用clip:

p{
text-overflow:clip;
}

css3总结(3)字体，文字，文本
实例，使用ellipsis:

p{
text-overflow:ellipsis;
}

css3总结(3)字体，文字，文本

补充：

单行文本溢出显示省略号…

核心css语句：
1、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
2、white-space: nowrap; （设置文字在一行显示不能换行）
3、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
实例：

<p class="p1">本例演示当光标浮动到元-素上时如何显示全部文本。</p>

p
{
width: 130px;
height: 40px; 
line-height: 40px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}

css3总结(3)字体，文字，文本

多行文本溢出显示省略号

核心css语句：

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性）
2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示）
3、-webkit-box-orient:vertical;（和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。）
4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
实例：

<style>
p
{
width: 230px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
}
</style>

css3总结(3)字体，文字，文本

css3总结(3)字体，文字，文本

字体

font-family设置字体系列

font-style设置字体斜体

font-variant设定小型大写字母

color设置字体颜色

font-weight设置字体加粗

@font-face

Neues Bauen Demo

文本效果

text-indent实现文本缩进

text-align文本对齐

word-spacing改变字（单词）之间的标准间隔

letter-spacing修改的是字符或字母之间的间隔

text-transform字符转换

text-decoration文本装饰

white-space处理空白符

direction设置文本方向

line-height文本行高

text-shadow设置文字阴影效果

word-wrap是否允许长单词换行到下一行

word-break规定自动换行的处理方法。

text-overflow规定当文本溢出包含元素时发生的事情。

单行文本溢出显示省略号…

多行文本溢出显示省略号

css3实现3D文本悬停改变效果的示例代码

详解CSS3中字体平滑处理和抗锯齿渲染

CSS3,线性渐变（linear-gradient）的使用总结

IE下实现类似CSS3 text-shadow文字阴影的几种方法

html5/css3响应式页面开发总结

CSS3实现3D文字动画效果

CSS3实现文本垂直排列的方法

CSS3实现背景透明文字不透明的示例代码

利用CSS3实现文字折纸效果实例代码

Css3新特性应用之形状总结