CSS 3学习——文本效果和@font-face

文本效果

关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是:

text-overflow

text-shadow

word-break

word-wrap

text-overflow

介绍text-overflow之前先介绍一个white-space属性。

white-space属性用来描述如何处理元素中的空白符,可以从父元素继承值。

可取值:

normal  默认值。连续地空白符会被合并,包括换行符。文本填充行盒时,会根据需要自动换行。

nowrap  连续的空白符(包括换行符)会被合并,但文本不会自动换行。文本会在同一行上填充,直到遇到<br>元素。

pre  连续的空白符会被保留,在遇到换行符或者<br>元素时才会换行。

pre-wrap  连续的空白符会被保留,文本会根据需要自动换行。

pre-line  连续的空白符会被合并(不包含换行符),文本会根据需要自动换行。

inherit  从父元素继承值。

下面的表格总结了各种 white-sapce 值的行为:

  换行符 空格和制表符 文字转行
normal 合并 合并 转行
nowrap 合并 合并 不转行
pre 保留 保留 不转行
pre-wrap 保留 保留 转行
pre-line 保留 合并 转行

要看到text-overflow的效果,就要使文本不能换行。

text-overflow的可取值:

clip  默认值。文本溢出时,修剪溢出的部分(剪掉)。

ellipsis  显示省略号来代替被修剪的文本。

string  使用给定的字符串来代表被修剪的文本。(该值还没有得到浏览器的支持)

text-shadow

text-shadow用于向文本添加一个或多个阴影,原理与边框的阴影相同。

该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值。省略的长度值为0。

语法:

text-overflow:x-shadow y-shadow blur color;

x-shadow  指定阴影相对于文字的水平偏移量。若是负值,则阴影位于文字的左边。

y-shadow  指定阴影相对于文字的垂直偏移量。若是负值,则阴影位于文字的上边。

blur  可选,<length>值,默认为 0。指定阴影的模糊距离,值越大,模糊半径越大,阴影也越大越淡。

color  可选,指定阴影的颜色。

word-break

该属性指定一个单词如何换行。

通过这个属性可以让浏览器实现任意位置的换行。

可取值:

normal   默认值。使用浏览器默认的换行规则。

break-all  允许在单词内换行。

keep-all   只能在半角空格或连字符处换行。

word-wrap

现在该属性已经被重命名为overflow-wrap。是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

可取值:

normal  表示在正常的单词结束处换行。

break-word  表示如果行内没有多余的地方容纳该单词到结尾,则哪些正常的不能被被分割的单词会被强制分割换行。

@font-face

在CSS 3中,开发者可以通过@font-face来自定义字体。

语法:
@font-face {

font-family:  YourFontName;

src: [url() || local() ]+  || format(str)?;

sRules;

}

通过font-family可以给自定义字体命名任意自己喜欢的名字,要用引号包裹。

通过 src 可以加载存放在服务器上的字体文件(受同源策略限制),也可以使用本地字体。使用本地字体时,用 local() 函数引用(字体名字不加引号)。在加载服务器上的字体文件时,可以用format()函数指定字体文件相应的文件类型。

得到支持的字体文件的类型有以下几种:

String Font Format Common extensions
"woff" WOFF (Web Open Font Format) .woff
"truetype" TrueType .ttf
"opentype" OpenType .ttf, .otf
"embedded-opentype" Embedded OpenType .eot
"svg" SVG Font .svg, .svgz

传入format()函数的参数为上表中第一列中的一个(根据具体引用字体文件的后缀确定)。

不同浏览器对以上几种字体文件的支持情况不同,具体可以看这篇文章

sRules 是具体的字体样式,相关属性如下:

font-variant

font-stretch

font-weight

font-style

unicode-range

font-variant

可取值

normal  默认值。正常字体。

small-caps  字体为小型大写字母。

以上两个值在CSS 1 中定义,CSS 3 中新加的值还没有得到浏览器支持。

font-stretch

查资料,这个属性只有IE和Firefox支持,但没有效果。

unicode-range

该属性的作用是告知浏览器,通过@font-face引入的字体覆盖了Unicode字符体系的哪些部分,以便浏览器仅在该范围内的字符使用该字体,使用时要把限定了字符范围的自定义字体名字放在对应元素font-family的第一个的位置上。具体看参考资料中的第5条。

参考资料

1、W3school

2、MDN

3、官方规范

4、CSS3 @font-face

5、妙用UNICODE-RANGE实现字体混搭

时间: 2024-10-12 12:47:41

CSS 3学习——文本效果和@font-face的相关文章

第十六天学习:CSS特性之文本格式化

关键字:文本格式化 学习计划: 文本格式化 color特性 text-align特性 vertical-align特性 text-decoraton特性 text-indent特性 text-shadow特性 text-transform特性 letter-spacing特性 word-spacing特性 white-space特性 direction特性 unicode-bid特性 学习记录: color特性 用于指定文本的颜色,这个属性设置了一个元素的前景色(在HTML表现中,就是文本的颜色

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!

关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. http://jsfiddle.net/vnkuZ/ 总共四个工作区:左上是 Html 界面组件:左下

HTML&CSS基础学习笔记7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签. 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title><

css3学习总结1--CSS3文本效果

CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length length length color 其中,前面三个length分别指阴影离开文字的横方向距离.阴影离开文字的纵方向距离和阴影的模糊半径,color指阴影的颜色. 下面是一个text-shadow属性的使用示例.在该示例中给一段红色文字绘制灰色阴影.其中阴影离开文字的横方向距离和纵方向距离均为5个像素

【css】文本效果

一.text-shadow(文字阴影) 1.基础用法:text-shadow: 1px 1px 5px rgb(106, 103, 103); 2.基础参数: h-shadow:必需.水平阴影的位置.允许负值. v-shadow:必需.垂直阴影的位置.允许负值. blur:可选.模糊的距离. color:可选.阴影的颜色. 3.常见文本效果 基础样式 .c{ text-shadow: 1px 1px 5px rgb(106, 103, 103); } 文字描边 有4个阴影时, 可以给文字画一个轮

HTML/CSS/JavaScript学习总结(转)

HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 . Html是通过标签来定义的语言,代码都是由标签所组成 .Html代码不用区分大小写 . Html代码由<html>开始</html>结束.里面由头部分<head>

CSS(2)---css字体、文本样式属性

css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅