当前位置：首页 > article >正文

HTML5新特性|06 文本效果text-shadowword-wrap自定义字体

article 2025/1/7 11:05:20

文本效果

1、CSS3包含多个新的文本特性

属性:

text-shadow:水平阴影垂直阴影模糊距离阴影颜色
word-wrap：用于指定当文本溢出其容器的边界时如何处理换行的问题

浏览器支持:

Internet Explorer 10、Firefox、 Chrome、 Safari 以及Opera支持text-shadow属性。

2、实例

示例1：文本阴影text-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3文本效果_text-shadow</title>
    <style>
        h1{
            /*设置文本阴影*/
            /*text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色*/
            text-shadow: 5px 5px 3px #ff0000;
        }
    </style>
</head>
<body>
    <h1>我是一个标题</h1>
</body>
</html>

在这里插入图片描述

示例2：文本溢出换行word-wrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3文本效果_word-wrap</title>
    <style>
        p.test{
            /*1em 等于 元素的字体大小*/
            width: 11em;
            border: 1px solid #2277ff;
            /*用于指定当文本溢出其容器的边界时如何处理换行的问题*/
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <p class="test">
        Thisismorethanjustaplace. It’s a way of life. This is where Culture and community thrives. Where Creative Energy sparks Entrepreneurial spirit…
        If you’re thinking of making a move to the West of Ireland but have some big questions, this page has been designed for you.
        How much will rent cost? How much is childcare? Have many people made the move successfully and found a role?
        We will be adding new content all the time so be sure to check back or follow us on social to keep up to date.
    </p>
</body>
</html>

在这里插入图片描述

示例3：引用服务器上的字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3文本效果_引用服务器上的字体.html</title>
    <style>
        /*自定义字体myfamily*/
        @font-face{
            font-family: myfamily;
            src: url(".ttf");
        }
        p.test{
            border: 1px solid #2277ff;
            font-family: myfamily;
        }

    </style>
</head>
<body>
    <p class="test">
        It's a way of life. This is where Culture and community thrives.
    </p>
</body>
</html>