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、官方规范
CSS 3学习——文本效果和@font-face的更多相关文章
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- CSS文本效果
前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 【css】文本效果
一.字体属性 在css字体样式中常见的字体属性有以下几种 p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆, ...
- css3学习总结5--CSS3文本效果
CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length le ...
- DIV+CSS系统学习:转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
随机推荐
- 故障重现, JAVA进程内存不够时突然挂掉模拟
背景,服务器上的一个JAVA服务进程突然挂掉,查看产生了崩溃日志,如下: # Set larger code cache with -XX:ReservedCodeCacheSize= # This ...
- 对抗密码破解 —— Web 前端慢 Hash
(更新:https://www.cnblogs.com/index-html/p/frontend_kdf.html ) 0x00 前言 天下武功,唯快不破.但在密码学中则不同.算法越快,越容易破. ...
- Ubuntu 14.04中Elasticsearch集群配置
Ubuntu 14.04中Elasticsearch集群配置 前言:本文可用于elasticsearch集群搭建参考.细分为elasticsearch.yml配置和系统配置 达到的目的:各台机器配置成 ...
- PHP的学习--RSA加密解密
PHP服务端与客户端交互或者提供开放API时,通常需要对敏感的数据进行加密,这时候rsa非对称加密就能派上用处了. 举个通俗易懂的例子,假设我们再登录一个网站,发送账号和密码,请求被拦截了. 密码没加 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- .NET平台和C#编程的总结
第一章 简单认识.NET框架 (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework ...
- 【Java每日一题】20170105
20170104问题解析请点击今日问题下方的"[Java每日一题]20170105"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...
- Javascript中的valueOf与toString
基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
- JavaScript 正则表达式语法
定义 JavaScript定义正则表达式有两种方法. 1.RegExp构造函数 var pattern = new RegExp("[bc]at","i"); ...