如何在多个svg文件中使用字体字形？

Christopher Gaston 发表于 Dev

克里斯托弗·加斯顿

我有许多svg文件，每个svg中使用相同的字形。有没有办法一次定义这些字形，然后从每个需要它们的svg文件中调用它们？我正在研究的项目是适用于Apple ibooks应用程序的epub格式电子书。字形如下。

<font horiz-adv-x="1000">
<!-- Copyright (C) Avid Technology, Inc. 1987-2010 -->
<!-- Copyright: Copyright 2014 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="OpusText" units-per-em="1000" underline-position="-123" underline-thickness="20"/>
<missing-glyph horiz-adv-x="500"/>
<glyph unicode="#" horiz-adv-x="360" d="M239,371l-105,-35l0,-189l105,35M266,634l0,-156l56,19l0,-100l-56,-18l0,-189l56,18l0,-99l-56,-19l0,-170l-27,0l0,162l-105,-34l0,-163l-27,0l0,155l-57,-19l0,100l57,18l0,189l-57,-18l0,99l57,19l0,171l27,0l0,-163l105,34l0,164z"/>
<glyph unicode="b" horiz-adv-x="321" d="M50,635l35,0l-8,-316C100,356 134,375 179,375C194,375 209,372 224,367C239,361 252,353 263,343C274,333 283,321 290,308C297,294 300,279 300,263C300,240 293,218 279,196C264,173 245,151 222,129C199,106 172,84 142,61C112,38 81,14 50,-10M151,330C136,330 123,327 114,320C104,313 96,304 91,293C85,282 81,269 79,256C76,242 75,228 75,215l0,-47C75,111 77,73 81,54C95,64 110,78 126,96C141,114 155,133 168,154C181,174 191,194 200,215C208,235 212,253 212,268C212,285 206,299 195,312C183,324 168,330 151,330z"/>
</font>
<font horiz-adv-x="2048">
<!-- Copyright (c) 2001, Modular Infotech, Pune, INDIA. - Licenced to Microsoft -->
<!-- Copyright: Copyright 2014 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="Utsaah" units-per-em="2048" underline-position="-168" underline-thickness="102"/>
<missing-glyph horiz-adv-x="1600" d="M200,1400l1200,0l0,-1400l-1200,0M1300,100l0,1200l-1000,0l0,-1200z"/>
<glyph unicode="=" horiz-adv-x="856" d="M775,617l-693,0l0,120l693,0M775,299l-693,0l0,120l693,0z"/>
<glyph unicode="A" horiz-adv-x="978" d="M-2,0l403,1050l150,0l429,-1050l-158,0l-122,318l-439,0l-116,-318M301,431l356,0l-110,291C514,810 489,882 473,939C460,872 441,805 416,739z"/>
<glyph unicode="B" horiz-adv-x="978" d="M107,0l0,1050l394,0C581,1050 645,1039 694,1018C743,997 781,964 808,920C835,875 849,829 849,781C849,736 837,694 813,655C788,615 751,583 702,558C766,540 815,509 849,464C883,419 900,365 900,304C900,255 890,210 869,168C848,125 823,93 792,70C761,47 723,29 677,18C631,6 575,0 508,0M246,609l227,0C535,609 579,613 606,621C641,632 668,649 686,674C703,698 712,728 712,765C712,800 704,830 687,857C670,883 647,901 616,911C585,921 531,926 456,926l-210,0M246,124l262,0C553,124 584,126 602,129C634,134 661,144 683,158C704,171 722,191 736,216C749,241 756,271 756,304C756,343 746,378 726,407C706,436 678,456 643,468C607,479 556,485 489,485l-243,0z"/>
<glyph unicode="C" horiz-adv-x="1059" d="M862,368l139,-35C972,219 919,132 844,72C768,12 675,-18 566,-18C453,-18 362,5 291,51C220,97 166,164 129,251C92,338 73,432 73,533C73,642 94,738 136,819C177,900 237,962 314,1005C391,1047 476,1068 569,1068C674,1068 762,1041 834,988C905,934 955,859 983,762l-137,-32C822,806 787,862 741,897C694,932 636,949 566,949C485,949 418,930 364,891C309,852 271,800 249,735C227,670 216,602 216,533C216,444 229,367 255,300C281,233 322,184 377,151C432,118 491,101 555,101C633,101 699,124 753,169C806,214 843,280 862,368z"/>
<glyph unicode="D" horiz-adv-x="1059" d="M113,0l0,1050l362,0C556,1050 619,1045 662,1035C722,1021 773,996 816,959C871,912 913,853 940,780C967,707 981,624 981,531C981,451 972,380 953,319C934,257 911,206 882,166C853,125 821,94 786,71C751,48 710,30 661,18C612,6 555,0 492,0M252,124l224,0C545,124 600,131 639,144C678,157 710,175 733,198C766,231 792,275 811,331C829,386 838,454 838,533C838,642 820,727 784,786C748,845 704,884 652,904C615,919 555,926 473,926l-221,0z"/>
<glyph unicode="E" horiz-adv-x="978" d="M116,0l0,1050l759,0l0,-124l-620,0l0,-322l581,0l0,-123l-581,0l0,-357l644,0l0,-124z"/>
<glyph unicode="F" horiz-adv-x="896" d="M120,0l0,1050l708,0l0,-124l-569,0l0,-325l493,0l0,-124l-493,0l0,-477z"/>
<glyph unicode="G" horiz-adv-x="1141" d="M604,412l0,123l445,1l0,-390C981,91 911,50 838,23C765,-4 691,-18 614,-18C511,-18 418,4 334,49C249,93 186,157 143,240C100,323 78,417 78,520C78,622 99,717 142,806C185,895 246,961 327,1004C407,1047 499,1068 604,1068C679,1068 748,1056 809,1031C870,1006 919,972 954,928C989,884 1015,827 1033,756l-125,-34C892,775 872,817 849,848C826,879 792,903 749,922C706,940 657,949 604,949C541,949 486,939 440,920C393,901 356,875 328,844C299,812 277,777 261,740C234,675 221,604 221,528C221,435 237,357 270,294C302,231 349,184 411,153C472,122 537,107 606,107C667,107 726,119 783,142C840,165 884,190 913,216l0,196z"/>
</font>

谢谢--christopher

罗伯特·朗森

您需要为您的<font>元素提供id属性，例如id =“ myfont”。然后您可以使用@ font-face引用它

<svg xmlns='http://www.w3.org/2000/svg'>  
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'OpusText'; 
          src: url("myfont.svg#myfont") format("svg")
        }
      ]]>
   </style>
  </defs>
  <text x="100" y="100" font-family="OpusText">Text using referenced font</text>
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。