Tôi đã tạo một biểu tượng Facebook tùy chỉnh bằng Inkscape và lưu nó dưới dạng svg. Nó sử dụng phông chữ giống như tiêu đề của trang của tôi, sử dụng phông chữ "ubuntutitling-bold-webfont", mà tôi đã tham chiếu dưới dạng .woff trong tệp CSS. Các chức năng tiêu đề, nhưng svg thì không - nó hiển thị "f" trong một số phông chữ mặc định. Tệp phông chữ được đặt tại ../fonts/ubuntutitling-bold-webfont.woff về tính tương đối với tệp CSS và hình ảnh, và tại phông chữ / ubuntutitling-bold-webfont.woff tương đối với trang web.
Tôi tìm hiểu Làm cách nào để nhúng Google Web Fonts vào SVG? , nhưng tôi hơi bối rối về cách áp dụng mã cho SVG, nếu tôi thậm chí cần. SVG có thể sử dụng phông chữ .woff được tham chiếu trong tệp CSS không? Cách tôi tự thay đổi phông chữ bên trong tệp SVG có đúng không?
Đây là mã cho SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="80"
height="80"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="26.573808"
inkscape:cy="42.478414"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1619"
inkscape:window-height="611"
inkscape:window-x="165"
inkscape:window-y="301"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.75006053,-981.36219)">
<rect
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2987"
width="70"
height="70"
x="4.2499394"
y="986.36218"
rx="10"
ry="10" />
<text
xml:space="preserve"
style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
x="25.989071"
y="1096.0118"
id="text3757"
sodipodi:linespacing="125%"
transform="scale(1.0381556,0.96324674)"><tspan
sodipodi:role="line"
id="tspan3759"
x="25.989071"
y="1096.0118"
style="stroke-width:2.73607969">f</tspan></text>
</g>
</svg>Cảm ơn bạn trước.