使用SVG划分，列为行的两行文本和下划线，没有内联代码

Question

我正在尝试创建一个通用的“类似标题”的div，可以在外部样式表中完全更改。我的网站信息是静态的，我只是希望风格/外观是动态的，这样我所要做的就是换掉CSS链接和* bam *，网站是不同的。

我需要这个类似标题的div的第一个版本看起来像这样：

它看起来像你典型的学校信头。徽标是一个SVG，我更喜欢这样使用它，因此很容易动态操作。

我最初在HTML文件中将图像作为<img src=...行，但意识到它不是很动态。它也使用人力资源为我的线条古怪，毫无疑问是由于我做错了。我尝试使用div属性创建background-image，但它根本没有显示。我真的希望两行文本可以单独配置，重新调整大小和/或字体重量/字体系列。我真的，真的，非常喜欢这完全在外部样式表中完成，因此，正如我所说，我可以轻松地改变它。我希望能够包括文本，就像这里的“Sakura Gakuen”一样，所以整个darned的东西是动态可变的。

我的想法可以完全吗？如果没有，我们最接近我的想法的是什么？我不在乎@imports或其他什么是必需的。如果有意义，我只想要一些静态动态的东西。基本上，我的基本和相对不变的文本的模板页面，以及在调用样式表时更改的图像/标题被换出。

我在那里使用的字体是EB Garamond，我的SVG可以找到here并且大小为100px宽度，我想在边距和20px的“字母头”之间的每一边填充。

Answer 1

这是你追求的那种吗？

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}

<div class="letterhead">
  <span class="line1">Sakura</span>
  <span class="line2">Gakuen</span>
</div>

<强>更新

OP询问是否：

  

将“Sakura Gakuen”文本放入外部表单的方法吗？

这是文本在样式表中的版本。请注意，通常不建议这样做。通常最好将内容和样式分开。

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}

.line1::before {
  content: 'Sakura'
}

.line2::before {
  content: 'Gakuen'
}

<div class="letterhead">
  <span class="line1"></span>
  <span class="line2"></span>
</div>

Answer 2

有多种方法可以实现您的目标。这是一种可能的解决方案。

HTML code ...

<div>
    <div class="logo">
        <svg class="logo-svg" viewBox="0 0 734 589" version="1.1" xmlns="http://www.w3.org/2000/svg">
            ....
        </svg>
    </div>
    <div class="letter-head">
        <div class="letter-head-text1">Sakura</div>
        <div class="letter-head-text2">Gakuen</div>
        <div class="letter-head-line"></div>
    </div>
</div>

CSS代码......

.logo {
    display: inline-block;
    vertical-align: bottom;
    padding-left: 10pt;
    padding-right: 10pt;
}

.logo-svg {
    width: 72pt;
    height: 72pt;
}

.letter-head {
    display: inline-block;
    font-size: 28pt;
}

.letter-head-text1 {
    font-weight: bold;
}

.letter-head-text2 {
    font-weight: normal;
}

.letter-head-line {
    border-top: 4pt solid gray;
    width: 300pt;
}