css设置英文字体间距

2025-10-22 17:35:48

1、新建一个html页面。如图:

css设置英文字体间距

2、在html页面上找到<body>标签,在这个标签上添加段落标签,然后在p标签上写入一些英文语句。为了方便观察与比较,我们写三个一模一样的标签,并在第二和第三个标签中添加class类样式。如图:

css设置英文字体间距

3、在浏览器上查看标签的效果,这时我们看到的是没有设置字体距离的效果。如图:

css设置英文字体间距

4、设置字体间距变大。

回到代码页面找到<title>标签,在<title> 标签后添加一个<style>标签,并在<title>标签里设置第二个标签的样式类:空格的间距是50px

样式代码:

<style type="text/css">

.font-spacing{

word-spacing: 50px;

}

</style>

如图:

css设置英文字体间距

5、使用浏览器打开html页面,我们会发现第二行的英文间距加大了。如图:

css设置英文字体间距

6、设置字体间距变小。

回到html代码页面,在<style>标签里设置第三个标签的class类样式为:空格间距缩小0.5em

样式代码:

.font-spacing2{

     word-spacing: -0.5em;

}

css设置英文字体间距

7、回到浏览器页面,刷新浏览器即可看到空格间距缩小了0.5em。如图:

css设置英文字体间距

8、html页面所有代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>英文字体间距设置</title>

<style type="text/css">

.font-spacing{

word-spacing: 50px;

}

.font-spacing2{

word-spacing: -0.5em;

}

</style>

</head>

<body>

how are you

how are you

how are you

</body>

</html>

css设置英文字体间距

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢