HTML CSS中如何样式化大型引号

Question

如何使用那些巨大的引号来样式化引语？

我已经尝试了网上显示的大多数示例。 使用带有:before和:after CSS样式的块引用。 我面临的问题是避免在文本周围包裹div中使用图像，因为它不够响应。 我还在使用Twitter Bootstrap框架。

HTML中的引语：

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

还有 CSS：

blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before { 
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
} 
blockquote h3:after { 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
}

问题是要让它看起来像这个例子。虽然响应式有点起作用，但引号并没有对角线地相互定位。

- Reeze Cornelius

---

你说你不想使用图片“因为响应性”，但是你却用了一个固定大小（即非响应式）的字体大小来表示引号。下定决心吧！ - Niet the Dark Absol

我不确定你的示例有什么问题，它似乎完美地运行。 - Joe

你实际上想要实现什么，因为从我的角度来看，你的示例实际上已经做到了你想做的事情。请尝试解释一下。 - Andy Reimann

@NiettheDarkAbsol 它的响应很好。但是，让它看起来与图像完全相同的样式确实让我非常困扰。 - Reeze Cornelius

@ AndyReimann 代码似乎运行正常。问题在于样式部分。我没有得到像图片中所希望的最终结果。 - Reeze Cornelius

我认为你只需要尝试使用不同的字体来渲染引用部分。 - Novocaine

Answer 1

虽然在阅读你的问题后并不清楚，但我猜你想改变引号的形状。

选择一个适当的unicode值并添加一个quotes属性。例如：

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote h3 {
font-size:21px;
}

blockquote h3:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote h3:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
  
}

<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

您可能还想更改font-family，以便引号的形状更适合您的需求。

这是jsfiddle链接。

- Kuba Rakoczy

---

Rakaczy 做得很好... 谢谢。我改变的唯一一件事是仅在 blockquote h3:before 和 blockquote h3:after 类中加入 font-family。 - Reeze Cornelius

Answer 2

引号应该不是对角线排列的

所以只需正确地放置它们:

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

或者像这个演示中的例子：http://jsfiddle.net/pz6kx0bw/

- Jan Drewniak

---

这个很好用，谢谢。我使用了你的建议，使用了位置属性。 - Reeze Cornelius