如何处理SVG字体中的过冲？

Question

我想在SVG中使用非常精美的字体，所以我可以将它与SVG中的其他东西结合起来用于最终产品。它会剪掉超出基本字体大小的悬垂和其他花哨位。如何让这些再次展示？出于某种原因，该片段不是读取我的字体URL，而是我自己的文件读取并显示正常，所以做任何你需要做的事情才能让它足够用于测试目的。

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 300">
    <defs>
      <filter id="dropshadow" width="250px" height="250px">
        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>

    <text x="80" y="80" style="font-family: PorcelainRegular; 
			font-size: 80px;
			stroke: #000000;
			fill: #ffffff;
			filter: url(#dropshadow);">
      Cafe
    </text>
    <text x="80" y="150" style="font-family: PorcelainRegular; 
			font-size  : 80px;
			stroke     : #000000;
			fill       : #ffffff;
			filter: url(#dropshadow);">
      Nocturne
    </text>
  </svg>