| 网页让文字倾斜，你知道几种方式？ | 您所在的位置：网站首页 › ai字体倾斜角度 › 网页让文字倾斜，你知道几种方式？ |
网页让文字倾斜，你知道几种方式？
|
表示一个作品的引用，且必须包含作品的标题。 css:font-stylefont-style有两个值可以让文字倾斜，「italic」，「oblique」。 .demo-italic { font-style: italic; } .demo-oblique { font-style: oblique; } 客路青山外，行舟绿水前; keluqinngshanwai,xingzhoulvshuiqian 客路青山外，行舟绿水前; keluqinngshanwai,xingzhoulvshuiqian效果： 虽然italic和oblique都表示字体倾斜，但是二者的倾斜原理不一样。 italic让字体以起自身的倾斜版本显示，oblique强行把当前的字体倾斜一定角度。 transform我们前面的实现，倾斜幅度都很小，transform可以实现更加可控，更加强烈的倾斜。 css中使用transformtransform有两个属性可以让文字倾斜，分别是**「rotate」、「skew」** .demo-rotate { width: 200px; transform: rotate(30deg); } .demo-skew { width: 200px; transform: skew(-30deg); } 客路青山外，行舟绿水前; 客路青山外，行舟绿水前;CSS的rotate()函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。 skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个 数据类型 正如单词本身的含义rotate是旋转，skew是歪、扭曲。 SVG中使用transformSVG中的text标签用来承载文字，通过text的transform属性可以控制文字的旋转。 孤岛轻雾里，行舟白波上。canvas为了简化transform方法，在仅仅做旋转操作时，可以使用rotate方法。canvas中的rotate方法和css中transform的rotate属性，异曲同工。 #rotate-demo{ width: 300px; height: 300px; } let ctx = document.getElementById('rotate-demo').getContext('2d'); ctx.font="14px Arial"; ctx.rotate(30*Math.PI/180) ctx.fillText("骤雨一阳散，行舟四海来",50,50);很多网页都需要文字水印，我们介绍一种用svg实现文字水印的方法。 在介绍实现方法之前，你需要知道SVG除了可以当成标签在html中显示，还可以当成background-image。 .svg-bg{ width: 500px; height: 500px; background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.2' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3E行舟%3C/text%3E%3C/svg%3E"); }效果： 用这种方式制作文字水印有两个好处 第一：使用ctrl+f全文搜索时，因为是背景图，所以内容无法被搜到 第二：可以使用js动态生成svg的文字内容，方便前端控制水印的文字 总结今天和大家介绍了文字倾斜的几种方式，如果你还有别的方法，欢迎私信或者留言讨论。 参考资料[1] developer.mozilla.org/zh-CN/docs/… [2] www.zhangxinxu.com/wordpress/2… 诚邀关注公众号：一行舟 我会每周更新技术文章，和大家一起学习进步。 |
【本文地址】