Question

<svg width="300px" height="300px" viewBox="0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <style type="text/css">
            /* SVG Style */
            @font-face {font-family: "Bebas";
              src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot"); /* IE9*/
              src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff2") format("woff2"), /* chrome、firefox */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff") format("woff"), /* chrome、firefox */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.svg#Century Gothic Bold V1") format("svg"); /* iOS 4.1- */
            }
    .text{
          font-family: 'Bebas' !important;
        }
        </style>
        <text class="text" id="S" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00">
                    <tspan x="100" y="100">S</tspan>
                </text>
                <text class="text" id="S-Copy" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00">
                    <tspan x="100" y="150">S</tspan>
                </text></svg>

我有一个嵌入式样式的svg，我在我的主页上使用它

<img src="images/test.svg" onerror="this.onerror=null; this.src='images/test.png'">

SVG：

<svg width="300px" height="300px" viewBox="0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <style type="text/css">
        /* SVG Style */
        @font-face {font-family: "Bebas";
          src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot"); /* IE9*/
          src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff2") format("woff2"), /* chrome、firefox */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff") format("woff"), /* chrome、firefox */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.svg#Century Gothic Bold V1") format("svg"); /* iOS 4.1- */
        }
.text{
      font-family: 'Bebas' !important;
    }
    </style>
    <text class="text" id="S" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00">
                <tspan x="100" y="100">S</tspan>
            </text>
            <text class="text" id="S-Copy" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00">
                <tspan x="100" y="150">S</tspan>
            </text></svg>

我在font-family: "Bebas"上使用.text。

当我以http://localhost/test/images/test.svg

的形式访问图片时，一切正常

但是当它在主页上访问时，即在http://localhost/test/index.php上，则不会应用字体样式。

我还在svg。

中提到了this article css样式的范围

如何在主页上使用？

如何在<img/>内使用svg添加字体系列

0 个答案: