CSS3学习系列之字体
- 给文字添加阴影
在CSS3中，可以使用text-shadow属性给页面上的文字添加阴影效果。text-shadow属性是在css2中定义的，在css2.1中删除，在css3的text模块中有恢复了，用法如下：
text-shadow:length length length color
其中，前面三个length分别指阴影离开文字的横向距离、纵向距离和阴影的模糊半径，color指阴影的颜色。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow属性的使用示例</title>
<style>
div{
text-shadow: 5px 5px 5px gray;
color: navy;
font-size: 50px;
font-weight: bold;
font-family: 宋体;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
某些场合下可以通过给文字添加阴影来使页面上的文字更加容易看清楚，比如文字与背景不能很容易地分辨时，或文字与背景图片相互重叠的时候，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用阴影突出现在文字示例</title>
<style>
div {
color: yellow;
font-size: 25px;
font-weight: bold;
font-family: 宋体;
background: yellow;
width: 140px;
height: 45px;
padding: 30px 0;
text-align: center;
text-shadow: 3px 3px 5px black;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
- 位移距离
text-shadow属性的参数中，前两个参数为阴影离开文字的横方向位移距离与纵方向位移距离，可以对这两个参数指定负数值。
- 阴影的模糊半径
text-shadow属性参数中第三个参数是阴影模糊半径，代表阴影向外模糊时的模糊范围，这个半径的值越大，则阴影向外模糊的范围也就越大。
- 指定多个阴影
可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色，指定多个阴影使用逗号将多个阴影进行分隔。
- 指定自动换行的处理方法
在css3中可以使用word-break属性来自己决定自动换行的处理方法，通过word-break属性的指定，不仅仅可以让浏览器实现半角空格或连字符后面的换行，而且可以让浏览器实现任意位置的换行，word-break属性的使用方法如下：
div{
word-break:keep-all;
}
word-break属性可以使用的值如下表：
|
值 |
换行规则 |
IE5以上版本浏览器 |
Safari3与chrome6 |
|
normal |
使用浏览器默认换行规则 |
支持 |
支持 |
|
keep-all |
只能在半角空格或连字符处换行 |
支持 |
不支持 |
|
break-all |
允许在单词内换行 |
支持 |
支持 |
在ie浏览器中，当word-break属性使用keep-all参数值时，中文与中文之间不能换行。
对应标点符号来说，当word-break属性使用break-all参数值时，safari浏览器和chrome浏览器允许标点符号位于行首，ie下面标点符号不允许位于行首。
- 让长单词与URL地址自动换行—word-wrap属性
对于西方文字来说，浏览器在半角空格或连字符的地方进行换行，因此浏览器不能给较长的单词自动换行，当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部分出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前窗口显示的文字。
但是，这种比较长的单词出现的机会不是很大，而大多数超出当前浏览器窗口的情况是出现在显示比较长的URL地址的时候，因为在URL地址中没有半角空格，所以当URL地址中没有连字符的时候，浏览器在显示时是将其视为一个较长的单词来进行显示的。
在css3中，使用word-wrap属性来实现长单词与URL地址的自动换行输入方法如下：
div{
word-wrap:break-word;
}
word-wrap属性值可以是normal与break-word两个，使用normal属性值时浏览器保存默认处理。使用break-word时浏览器可在长单词或URL地址内部进行换行。
- 在网页上显示服务器字体
在css3中，可以使用@font-face属性来利用服务器端字体，使用方法如下：
@font-face{
font-family:WebFont;
src:url(‘font/Fontin_Sans_R_45.otf’ ) format(“opentype”);
font-weight:normal
}
- 显示客户端本地的字体
@font-face属性不仅可以用于显示服务器端字体，也可以用来显示客户端本地的字体。
- font-size-adjust属性的使用方法
font-size-adjust属性可以使修改字体类型而保持文字大小不会发生变化的目的。使用方法如下：
div{
font-size:16px;
font-family:Times New Roman;
font-size-adjust:0.46;
}
其中0.46为Times New Roman字体的aspect值，aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变，这个aspect值的计算方法为x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小写x的高度。使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-size-adjust属性的使用示例</title>
<style>
div#div1 {
font-size: 16px;
font-family: "Comic Sans MS";
font-size-adjust: 0.54;
} div#div2 {
font-size: 14px;
font-family: "Times New Roman";
font-size-adjust: 0.46;
}
div#div3{
font-size:16px;
font-family: "Times New Roman";
font-size-adjust: 0.46;
}
</style>
</head>
<body>
<div id="div1">
it is fine today. never change your plans because of the weather.
</div>
<div id="div2">
it is fine today. never change your plans because of the weather.
</div>
<div id="div3">
it is fine today. never change your plans because of the weather.
</div>
</body>
</html>
CSS3学习系列之字体的更多相关文章
- CSS3学习----选择器、字体
属性选择器: [att*=val]{}若att元素属性值包括val指定字符,则使用该样式 [att^=val]{}若att元素属性值开头字符为val,则使用该样式 [att&=val]{ ...
- css3学习总结6--CSS3字体
使用自己需要的字体 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件. 如需为 HTML 元素使用字体,请通过 font-family ...
- DirectX 基础学习系列6 字体
DIRECTX9自带ID3DXFONT类 内部调用GDI的接口,效率一般,但能够处理一些复杂的字体 HRESULT D3DXCreateFontIndirect( LPDIRECT3DDEVICE9 ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
随机推荐
- 详细解剖大型H5单页面应用的核心技术点
项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...
- c#常用方法和类
1. 数据类型转换函数 Convert.ToXXX(); XXX.Parse(); XXX.TryParse(); 2. 日期相关的类与函数 获取系统当前日期(含时间):DateTime.Now 获 ...
- 前端模块化——seaJS
1.seaJS手记 一:Bower获取 要安装bower Npm install -g bower Bower install seajs 二:Use方法是整个项目的入口方法,通常一个项目中只调用一次 ...
- node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了
最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...
- Codeforces 803F Coprime Subsequences (容斥)
Link:http://codeforces.com/contest/803/problem/F 题意:给n个数字,求有多少个GCD为1的子序列. 题解:容斥!比赛时能写出来真是炒鸡开森啊! num[ ...
- php学习之string
1. php str_replace函数: str_replace() 函数使用一个字符串替换字符串中的另一些字符. str_replace(find,replace,string,count) fi ...
- 门面(Facade)模式
门面模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面对象进行.门面模式提供一个高层次的接口,使得子系统更易于使用. 医院的例子 现代的软件系统都是比较复杂的,设计师处理复杂系统的一个 ...
- RabbitMQ学习3----运行和管理RabbitMQ
1.服务为管理 Erlang天生就是为了让应用程序无需知道对方是否存在同一台机器上即可互相通信. Erlang节点:Erlang虚拟机的每个实例.多个Erlang应用程序可以运行在同一个节点之上.节点 ...
- APICloud框架——总结一下最近开发APP遇到的一些问题
距离上一次发文都过去十天了, 下班回来懒的就想睡觉, 今天520一个重要的节日, 恩爱已经秀完, 该干点事情了!! 总结一下最近开发遇到的一些问题, 以及解决方案 纯css三角形 /* 没有哪个方向的 ...
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...