实现需求：
当我们在开发时，UI给我的设计稿，标题文字间距相同，可以根据设置图片间距离相同实现，前端开发如何实现？
实现方法：
一： span与span标签之间的空格或换行造成了一定的间距，可以通过一些方法来解决
方法一：将span写在一行 ，缺点：可能在格式化或其他人接手时候不小心修改
方法二：设置font-size为0，并添加额外的font-size ，缺点：重写比较麻烦
方法三：父元素设置flex布局，缺点:可能使某些数据失效，如align-last
方法四：span写在一行，并在中间添加注释 ，缺点：可能被他人修改，但是有注释会稍微好点
二 text-align两端对齐的使用
text-align: left;//行内内容向左侧边对齐。
text-align: right;//行内内容向右侧边对齐。
text-align: center;//行内内容居中。text-align: justify-all 和 justify 一致，但是强制使最后一行两端对齐
text-align: justify;//文字向两侧对齐，对最后一行无效。
text-align: justify-all;// justify 一致，但是强制使最后一行两端对齐。
text-align: start;//如果内容方向是左至右，则等于left，反之则为right。
text-align: end;//如果内容方向是左至右，则等于right，反之则为left。
text-align: match-parent;//和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。
实现源码：
section {
cursor: default;
display: inline-block;
text-align: justify;
text-align-last: justify;
}
/* drop-shadow()：drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面，例如： filter: drop-shadow(0px 2px 4px red); */
/* letter-spacing：CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。 */
.title {
font-family: YouSheBiaoTiHei;
font-size: 44px;
line-height: 57px;
/* 为文字设置背景渐变色： */
background: linear-gradient(180deg, #d0dae2 0%, #ffffff 100%);
/* 将背景裁剪为文字： */
background-clip: text;
-webkit-background-clip: text;
/* 设置text-fill-color或者color为透明。CSS 属性 -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性，则使用 color 属性的值。 */
-webkit-text-fill-color: transparent;
position: relative;
margin-bottom: 10px;
transition: all 0.5s ease-in-out;
filter: drop-shadow(0px 2px 4px #000);
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg,
rgba(72, 85, 100, 0) 0%,
#637992 51%,
rgba(72, 85, 100, 0) 100%);
}
.title span:nth-child(1) {
letter-spacing: 12px;
}
.en-title {
font-size: 12px;
color: #8e939a;
line-height: 13px;
letter-spacing: 2px;
font-family: "D-DIN";
}
section:hover .title {
font-size: 48px;
}
<section>
<p class="title" id="title">
<span id="item1"></span><!--消除间距--><span id="item2"></span>
</p>
<p class="en-title">
Title text arduous the same effect
</p>
</section>
// 标题字数有限制
const init = (title) => {
const dom1 = document.getElementById("item1");
const dom2 = document.getElementById("item2");
const titleBox = document.getElementById("title");
titleBox.dataset.title = title;
dom1.innerHTML = title.slice(0, -1);
dom2.innerHTML = title.slice(-1);
}
init('测试文间隔相同效果');
这里贴上效果图：
这里源码已经贴出，如有需要直接赋值使用，以备不时之需。更新css小技巧，如有喜欢欢迎关注
