• 给文字添加阴影

在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学习系列之字体的更多相关文章

  1. CSS3学习----选择器、字体

     属性选择器: [att*=val]{}若att元素属性值包括val指定字符,则使用该样式 [att^=val]{}若att元素属性值开头字符为val,则使用该样式 [att&=val]{ ...

  2. css3学习总结6--CSS3字体

    使用自己需要的字体 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件. 如需为 HTML 元素使用字体,请通过 font-family ...

  3. DirectX 基础学习系列6 字体

    DIRECTX9自带ID3DXFONT类 内部调用GDI的接口,效率一般,但能够处理一些复杂的字体 HRESULT D3DXCreateFontIndirect( LPDIRECT3DDEVICE9 ...

  4. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  5. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  6. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  7. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  8. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  9. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

随机推荐

  1. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  2. Android库的标准化（不断更新中）

    在Android的开发过程中,为了代码的通用性,模块化等原因,应该尽量将功能独立的,通用性高的模块抽离出来,建立单独的库.各个库的功能不同,但是同样作为库,依然有很多相通的地方. 各个库应该都应该遵循 ...

  3. jQuery中的选择器(上)

    从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...

  4. hdu4283 You Are the One 区间DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4283 自己想了很久还是不会,参考了别人的思路才写的,区间DP还是很弱,继续努力!! 思路: 转载: 题 ...

  5. 关于struts2 Could not find action or result错误

    今天来配置这个S2SH框架的的时候,刚把环境搭建好,启动时并没有报错,但是当我写了一个action,我也准备通过这个action来访问页面,但是这里我访问的时候却给我报Could not find a ...

  6. Python爬虫学习之获取网页源码

    偶然的机会,在知乎上看到一个有关爬虫的话题<利用爬虫技术能做到哪些很酷很有趣很有用的事情?>,因为强烈的好奇心和觉得会写爬虫是一件高大上的事情,所以就对爬虫产生了兴趣. 关于网络爬虫的定义 ...

  7. 【JAVAWEB学习笔记】25_Linux基础

    Linux基础 学习目标 1.了解Linux的简介与安装 2.掌握Linux常用的命令 3.掌握Linux系统上JDK.Mysql.Tomcat的安装 一.Linux的简介 1．Linux的概述 Li ...

  8. 17、Map接口及其常用子类(Hashtable、HashMap、WeakHashMap)

    17.Map接口 Map没有继承Collection接口,Map提供key到value的映射.一个Map中不能包含相同的key,每个key只能映射一个value.Map接口提供3种集合的视图,Map的 ...

  9. ZigZag Conversion2015年6月23日

    题目: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...

  10. 关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...