首页 > 代码库 > 文本效果、字体

文本效果、字体

2024-08-22 11:54:02   219人阅读

文本效果

text-shadow:

         字体阴影

         .text{ text-shadow:5 px 5px 5px #FF0000}

         指定:水平阴影、垂直阴影、模糊的距离，以及阴影的颜色

box-shadow:

         背景阴影

text-overflow:

         文字溢出

         .text{text-overflow:clip|ellipsis}

         剪切|…替代

word-wrap:

         如果某个单词太长，不适合在一个区域内，它扩展到外面：css3中，自动切换属性允许强制文本换行-即使这意味着分裂它中间的一个字。

         .text{word-wrap:break-word;}

word-break:

规定非中日韩文本的换行规则

css3单词拆分换行属性指定换行规则：

.text{word-break:keep-all|break-all;}

新文本属性

属性

描述

hanqing-punctuation

规定标点字符是否位于线框之外

punctuation-trim

规定是否对标点字符进行修剪

text-align-last

设置如何对齐最后一行或紧挨着强制换行符之前的行

Text-emphasis

向元素的文本应用重点标记以及重点标记的前背景色

Text-justify

规定当text-align设置为“justify”时所使用的对齐方法

Text-outline

规定文本的轮廓

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本效果</title> 
<style>
h1
{
    text-shadow: 10px 10px 5px #888;
}
div.test
{
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
}
</style>
</head>
<body>

<h1>文字阴影效果</h1>

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>

<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

<p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:‘>>‘;">This is some long text that will not fit in the box</div>

<p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p>

</body>
</html>

 

 字体

css3之前的版本，网页设计师不得不使用用户计算机已经安装的字体。

使用css3，网页设计师可以使用他/她喜欢的任何字体

当你发现您要使用的字体文件时，只需要简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的新的css3版本有关于@font-face规则描述。

您自己的字体是在css3@font-face规则中定义的。

<style>

@font-face

{

         font-family: myFirstFont;

         src: url(‘myfont/fontawesome-webfont.ttf‘)

                   ,url(‘myfont/fontawesome-webfont.woff‘); /* IE9 */

}

 

div

{

         font-family:myFirstFont;

}

</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>字体</title> 
<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(‘myfont/fontawesome-webfont.ttf‘)
        ,url(‘myfont/fontawesome-webfont.woff‘); /* IE9 */
}

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

<p style="font-family:‘Microsoft YaHei‘"> 微软雅黑 Microsoft YaHei  Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘Times New Roman‘"> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘SimSun‘"> 宋体  Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘SimHei‘"> 黑体   Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘ Microsoft JhengHei‘"> 微软正黑体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘ NSimSun‘"> 新宋体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘PMingLiU‘"> 新细明体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘DFKai-SB‘"> 标楷体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘FangSong‘"> 仿宋 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘KaiTi‘"> 楷体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘_GB2312 FangSong_GB2312‘">  仿宋_ Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘_GB2312 KaiTi_GB2312‘"> 楷体_ Internet Explorer 9 只支持 .eot 格式的字体.</p>




<p style="font-family:myFirstFont;">自定义字体</p>
<div>
Internet Explorer 9 只支持 .eot 格式的字体.
</div>

</body>
</html>

 

文本效果、字体


联系
我们