CSS实现字体描边的方法

最新推荐文章于 2024-09-05 10:00:00 发布

WEB嘟嘟

最新推荐文章于 2024-09-05 10:00:00 发布

阅读量1.3w

点赞数 5

分类专栏：笔记文章标签： css html js 前端 ui

本文链接：https://blog.youkuaiyun.com/qq_24537119/article/details/109641368

版权

笔记专栏收录该内容

8 篇文章

订阅专栏

我们经常做的边框以及分割线之类的是基于盒子模型的，一般使用border就可以搞定，但是在某些时候需要做一些字体的描边的功能，

比如像这种的，在CSS中也确实是有一个属性可以添加字体描边的，

-webkit-text-stroke:1px #f00;

利用这个属性确实是可以给字体加上描边，但是如果描边的宽度稍微宽一些的话，所描边的范围就会覆盖字体本身，文字就会显得特别奇怪

这里的红色描边部分已经覆盖掉了黑色的字体，如果这个描边宽度再宽一些的话就会完全覆盖掉字体了。但是在Photoshop里面的效果是不会这样的

在网上搜到的大部分的解决办法是通过字体阴影解决问题，给文字加上四个方向的阴影，一样可以实现像PS这样的效果但是当宽度达到一定像素的时候，一样会出现奇怪的情况，阴影会完全偏离字体。

其实最好的解决办法就是写两个字体

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>

<style>
.stroke{
    position:absolute;
    left:20px;
    top:20px;
    z-index: 2;
    margin:50px auto 100px;font-size:100px;
}
.border{
    z-index:1;
    -webkit-text-stroke:15px #f00;
}

.copyright,.info{font-style:italic;}
</style>
</head>
<body>
<div class="stroke">
	我是被描了1像素红边的文字
</div>
<div class="stroke border">
    我是被描了1像素红边的文字
</div>
</body>
</html>

就是将带边框的字体放在最底层，上面的文字就是不带边框的字体，这样给人的视觉效果就是Photoshop中的所谓的字体描边了。