blockquote quotes风格

Question

我正在尝试创建一种块引用样式，其中开始引号和结束引号比文本大，但仍然适合其行，如下所示

​

这是我有http://jsfiddle.net/EnL3R/2/的代码

<div id="conteudo">
  <ul class="parcerias">
    <li><a href="#">Title- <i>Author</i></a></li>
     <li class="descricao">
        <blockquote>
            
            <p><span>“</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla nisl quis enim scelerisque ac consectetur tortor molestie. Morbi mollis augue et risus imperdiet dictum. Suspendisse sed sapien nec erat pretium consectetur et et metus. Maecenas tincidunt turpis placerat nisi vulputate at volutpat ante vulputate. Duis accumsan suscipit posuere. Nunc suscipit facilisis dapibus. Nulla scelerisque felis sed urna bibendum facilisis. Vivamus fermentum egestas lorem ac accumsan. Aenean vulputate massa pharetra sapien tincidunt placerat. Aenean molestie luctus velit. Ut cursus ante ante, quis luctus diam. Ut varius, lorem non vestibulum ornare, sem nisi gravida leo, a molestie mauris mauris non orci. Proin sit amet leo nunc.
            </p> 
            <p> 
            Nunc mollis, nunc eu vestibulum feugiat, lacus dui hendrerit metus, a placerat nulla tortor eget lacus. Etiam semper ligula turpis. Vivamus eget luctus nulla. Aliquam non nibh turpis. Aliquam aliquet lorem id massa cursus auctor egestas est tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at purus vitae tortor venenatis vulputate eget eu metus. Donec accumsan metus scelerisque orci iaculis sed hendrerit ante suscipit. Vivamus tortor dolor, varius mollis scelerisque sed, sollicitudin a tellus. Mauris sit amet tincidunt mauris. Sed sed massa arcu, non eleifend felis. Cras non lacus nisi. Nulla magna turpis, lobortis ac adipiscing sed, consequat sed augue.
            </p> 
            <p> 
            Donec vel purus tortor, ut viverra mauris. Vivamus urna sapien, eleifend at posuere a, malesuada nec risus. In vitae erat in mauris ornare iaculis. Phasellus consectetur vestibulum risus non facilisis. Ut eu nibh quam. Donec eu augue sit amet lacus feugiat ullamcorper eu bibendum arcu. Pellentesque elementum rutrum nisi, ut pellentesque est bibendum id. Fusce justo lacus, venenatis eu vehicula a, porttitor quis mi.
            </p> 
            <p> 
            Sed in felis urna, non vestibulum magna. Nullam vitae augue sed mauris fermentum facilisis. Sed dictum diam eget ante varius at rhoncus arcu rutrum. Suspendisse lorem neque, convallis a vehicula quis, faucibus faucibus elit. Sed eget mauris nec felis malesuada pharetra quis in eros. Fusce urna nisi, iaculis vitae blandit non, posuere et nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vel leo sem. Vestibulum posuere, neque non mollis laoreet, quam quam pretium elit, in tincidunt lacus lectus ac lorem. Mauris vel odio dolor. Phasellus faucibus lobortis justo id malesuada.
            </p> 
            <p> 
            Nullam sed dolor id purus feugiat tincidunt. Aliquam eget consequat lacus. Cras augue erat, mattis sed consequat eget, mattis vel tellus. Aliquam erat volutpat. Ut in ornare lorem. Nam quis sodales tellus. Sed consequat imperdiet mattis. Morbi quis odio quis massa pellentesque laoreet. Curabitur lacinia lacus risus. Maecenas tincidunt ullamcorper ultrices.<span class="ultimo">„</span>
                       </p> 
            
        </blockquote>    
    </li>

/* CSS Document */
@font-face {
    font-family: 'LoraBold';
    src: url('fonts/lora-bold-webfont.eot');
    src: url('fonts/lora-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-bold-webfont.woff') format('woff'),
         url('fonts/lora-bold-webfont.ttf') format('truetype'),
         url('fonts/lora-bold-webfont.svg#LoraBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraItalic';
    src: url('fonts/lora-italic-webfont.eot');
    src: url('fonts/lora-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-italic-webfont.woff') format('woff'),
         url('fonts/lora-italic-webfont.ttf') format('truetype'),
         url('fonts/lora-italic-webfont.svg#LoraItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraRegular';
    src: url('fonts/lora-regular-webfont.eot');
    src: url('fonts/lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-regular-webfont.woff') format('woff'),
         url('fonts/lora-regular-webfont.ttf') format('truetype'),
         url('fonts/lora-regular-webfont.svg#LoraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



#conteudo ul.parcerias li.descricao blockquote {
    font-style:italic;
    margin:2em 0 3em 2em;
    quotes:'”' '„';
    
}


#conteudo ul.parcerias li.descricao blockquote span {
    font-size:1000%;
    color:black;
    display:inline;
    }

#conteudo ul.parcerias li.descricao blockquote span.ultimo {
    float:none;
    font-size:1000%;
    color:black;
    display:inline;
}

开引号显示在文本的上方，开引号和闭引号都在上面加了一些空白处，我意识到这是因为字体本身的字符有这个空格，有什么我可以补偿的吗？

Answer 1

修改了padding、margin、display和position属性，现在看起来可以正常显示：

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标记周围的黄色边框仅用于测试)

Answer 2

如果您不必担心在ie7或更早的版本中显示，我认为伪元素将是不错的选择。http://jsfiddle.net/EnL3R/16/

Answer 3

在我看来，使用图像可能会更好。如果您尝试使用文本作为引号，则会遇到引号本身只占行高的一小部分这一事实。

您只需将图像放入您的内容中，并使用vertical-align来正确定位即可。如果您不需要IE7或更低版本的支持，您甚至可以将它们放在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/