塊引用引號風格

我試圖做一個塊引用風格，其中一對引號是比文本大，但仍適合於它的線，像這樣example http://s17.postimage.org/ypvv8xxtb/blockquote.png 塊引用引號風格

這是我的代碼有http://jsfiddle.net/EnL3R/2/

上面的公開引用顯示了文字，並且開放引用和結束引用都在它上面留下了一些邊距，我意識到這是因爲字體中的字符本身具有此空白區域，無論如何我都可以補償這一點嗎？

來源

2012-08-28 João Pedro

那麼，有什麼問題呢？ – woz

我編輯了帖子，希望現在清楚 –

僞元素：之前＆：之後似乎是一個更好的方法：http://jsfiddle.net/EnL3R/12/ – LeBen

修改padding，margin，display和position屬性，現在它似乎是顯示OK：

blockquote span { 
    font-size:100px; 
    color:black; 
    position: relative; 
    display:inline-block; 
    padding:0px; 
} 

blockquote span.primo { 
    margin: -40px 0 -100px 0; 
    bottom: -40px; 
} 

blockquote span.ultimo { 
    margin:-130px 0 0 0; 
    bottom:0px; 
} 

/* IE7 only styles */ 
blockquote span { 
    *display: inline; zoom: 1; /* IE7 fix for inline-block */ 
} 
blockquote span.primo { 
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */ 
} 
blockquote span.ultimo { 
    *margin: -50px; /* IE7 position adjustment */ 
}

http://jsfiddle.net/EnL3R/26/（即圍繞span標籤黃色邊框是僅用於測試）

來源

2012-08-28 15:55:54 Stano

+1 - 此解決方案看起來最簡單沒有擺弄圖像+即使在舊版瀏覽器上也能正常工作 – Danield

如果你不我不必擔心在ie7或更高版本中展示，我認爲僞元素將成爲未來發展的方向。 http://jsfiddle.net/EnL3R/16/

來源

2012-08-28 16:11:28 Gidgidonihah

它看起來像我可能會更好地使用圖像。如果您嘗試使用引號的文本，則會遇到引號本身只佔行高一小部分的事實。

您可以將圖像放入您的內容中並使用vertical-align來獲得定位權。如果您不需要IE 7或更低版本的支持，您甚至可以將它們放入CSS中的:before和:after僞元素中。

blockquote :first-child:before { 
    content: url('images/openquote.png'); 
    } 

blockquote :last-child:after { 
    content: url('images/closequote.png'); 
    vertical-align: -35px; /* tuned to fit image */ 
}

演示：http://jsfiddle.net/EnL3R/17/

來源

2012-08-28 16:16:21 cloudfeet

如果您使用僞元素來顯示引號，則無需使用圖像而不是文本。您可以以任何您想要的方式定位僞元素。這也會減少http請求。或者至少，使用CSS精靈。 – Gidgidonihah

真的 - 我想我只是不喜歡調整負邊距來對付額外的空格，只是爲了直接使用字體中的引號。感覺就像是在一種非常特定的視覺效果之後，圖像在概念上似乎更適合於這種情況，而不是使用CSS以明顯與周圍文本分離的方式從字體中提取和渲染兩個單獨的字形。 – cloudfeet

有關HTTP請求的觀點是很好的 - 如果您擔心這一點，您可以使用'data：'URI來獲取單個請求中的所有內容，因爲圖像會很小。 – cloudfeet

更新的塊引用樣式..查看下面的代碼吧。

blockquote { 
    font-size: 18px; 
    padding:20px; 
    text-transform: uppercase; 
} 
blockquote:before { 
    top: 10px; 
    left: 20px; 
    content: "\201C"; 
} 
blockquote:after { 
    top:80px; 
    content: "\201D"; 
} 
blockquote:before, blockquote:after { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    font-size: 80px; 
    line-height: 1; 
    color: #dd7975; 
}

檢查this link更多的理解.....

來源

2016-11-23 17:27:34

塊引用引號風格

回答

相關問題