CSS3--字体@font-face

最新推荐文章于 2024-06-10 11:01:09 发布

努力学习的小蜗牛

最新推荐文章于 2024-06-10 11:01:09 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/105774747

版权

前言
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。而使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

CSS3 @font-face

规则

可以查阅网站
https://www.runoob.com/css3/css3-fonts.html

那么我就来讲一讲css 字体样式设置

属性一：text-shadow(文本阴影）

可以规定水平阴影，垂直阴影，模糊距离以及阴影的颜色

h3{text-shadow: 10px(水平距离） 10px(垂直距离） 10px(模糊距离) rgba(0,0,0,0.7)(模糊颜色);}

小建议：使用时阴影不要过大或者过小会破坏美观

属性二：word-break和word-wrap

换行效果
word-break: break-all | keep-all | normal;
break-all属性值：允许在单词内换行
keep-all属性值：只能在半角空格或连字符处换行

属性三：background(背景）

背景为字体提供了一个很好的特效将文字与图片结合起来使用

属性值

background-size:设置背景大小，可以用长度，百分比表示.
background-option:背景定位，大小可以用长度，百分比和单词(left cente right | top center bottom)表示
background-attachment: scroll | fixed;背景设置为是否滚动或者固定
background-image: url();背景图片链接地址
background-repeat: repeat(默认水平和垂直方向平铺） | repeat-x | repeat-y | no-reprat;
background-color: 背景颜色
background-origin border-box | padding-box | content-box; 规定背景的起点

我就来写几个简单的文字特效吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1 class="vintage1">来自CSS3的魅力</h1>
        <h1 class="vintage2">来自CSS3的魅力</h1>
        <h1 class="vintage3">来自CSS3的魅力</h1>
        <h1 class="vintage4">来自CSS3的魅力</h1>
        <h1 class='text-reflect-base'>来自CSS3的魅力</h1>
        <div class="text">
            <p>来自CSS3的魅力</p>
        </div>
<style>
body{
    text-align: center;
}
.vintage1{
color: transparent;
-webkit-text-stroke: 1px red;
letter-spacing: 0.04em;}
.vintage2{
color: transparent;
background-color : blue;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}
.vintage3{
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
.vintage4{
    font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink
}
.text-reflect-base{
    color: palegreen;
    -webkit-box-reflect:below 10px;
}
.text{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%; 
    -webkit-animation: masked-animation 4s linear infinite;
    font-size: 35px;
}
@keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
}
        </style>
    </body>
</html>