Html 如何使标题文本的一部分使用不同的字体，并在整个标题文本周围添加破折号？

我正在尝试创建如下内容：

为了开始这个设计，我想首先创建一部分标题文本粗体（使用不同的字体），我如何才能做到这一点

目前，这将生成我的标题：

 <h2 class="h1  section-header--left" style="font-family: Geogrotesque Regular; color: #071435; font-size: 22px">MEEST POPULAIR</h2>

MEEST popular

为了使文本加粗，我使用字体“Geogrotesque SemiBold”，有人知道我如何在html行中添加这个css并创建我想要的设计吗？所以文本“Meest”应该是“Geogrotesque Regular”字体，文本“Popular”应该是“Geogrotesque SemiBold”字体

如果您知道css可以在标题周围创建破折号，那就太好了

---

Niels

这是其他字体的简单示例：

h2{
字体：33px无衬线；
边缘顶部：30px；
文本对齐：居中；
文本转换：大写；
}
h2.背景{
位置：相对位置；
z指数：1；
}
h2.背景：之前{
边框顶部：2个实心#dfdfdf；
内容：“；
边距：0自动；/*此选项将线居中至指定的全宽*/
位置：绝对；/*此处的定位必须是绝对的，相对定位必须应用于父对象*/
顶部：50%；左侧：0；右侧：0；底部：0；
宽度：95%；
z指数：-1；
}
span{
/*要隐藏文本后面的行，必须将背景颜色设置为与容器相同*/
背景：#fff；
填充：0 15px；
字体系列：arial；
}
h2.double:before{
/*这只是为了从上面撤消：在设置样式之前*/
边界顶部：无；
}
h2.双人：之后{
边框底部：1px纯蓝色；
-webkit盒阴影：0 1px 0 0红色；
-moz盒阴影：0 1px 0 0红色；
长方体阴影：0 1px 0 0红色；
内容：“；
边距：0自动；/*此选项将线居中至指定的全宽*/
位置：绝对位置；
顶部：45%；左侧：0；右侧：0；
宽度：95%；
z指数：-1；
}

---

FIRSTTWO

你知道如何添加破折号吗？当我使用它时，不用我在任何地方说它就可以使字体变成斜体？我只想应用不同的字体，而不是样式。使用css更改字体/样式，你添加我的css？我现在正在使用带有css的项目。粗体文本{font-family:other}我现在只需要知道破折号