CSS3文本效果 、字体

1、 文本阴影

text-shadow向标题添加阴影:

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

2、 word-wrap自动换行

实例
允许对长单词进行拆分,并换行到下一行:

p {word-wrap:break-word;}

值 描述

normal 只在允许的断字点换行(浏览器保持默认处理)。

break-word 在长单词或 URL 地址内部进行换行。

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

语法

text-overflow: clip|ellipsis|string;
描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

CSS3字体

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

Firefox、Chrome、Safari 以及 Opera 支持 .ttf(True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。

示例:

使用您需要的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):

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

div
{
    font-family:myFirstFont;
}
</style>

使用粗体字体
您必须为粗体文本添加另一个包含描述符的 @font-face:

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Bold.ttf'),
         url('Sansation_Bold.eot'); /* IE9+ */
    font-weight:bold;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 文本效果 CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性: text-shadow 属性...
    鹿守心畔光阅读 711评论 0 4
  • 接上 关于CSShttp://www.jianshu.com/p/01d228219d59 学习CSS3的最佳网站...
    Amyyy_阅读 600评论 0 1
  • 1. 给文字添加阴影---text-shadow 值从左至右分别代表:阴影离开文字横向距离、纵向距离、模糊半径、阴...
    珍珠林阅读 327评论 0 0
  • 最近兴致上来,就想更换了那Blog标题字体(汉字的);网上搜索了一番,发现蘇新詩柳繁體这款甚合我心;然后就着手搞将...
    晚晴幽草阅读 2,457评论 1 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,815评论 0 2