如何在多個svg文件中使用字體字形？

我有許多svg文件在每個svg中使用相同的字體字形。有沒有辦法定義這些字形一次，然後從每個需要它們的svg文件中調用它們？我正在開發的項目是蘋果ibooks應用程序的epub格式電子書。字形在下面。如何在多個svg文件中使用字體字形？

<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

來源

2014-06-10 Christopher Gaston

你需要給你的<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>

來源

2014-06-10 16:40:56

但是，這隻適用於單個xhtml文檔內的svg文件？電子書由許多xhtml文檔組成，我需要能夠通過我的任何xhtml文檔中的任何svg調用這些字形。我想知道如果我可以調用一個只有字體元素的外部svg文件，但我不確定這會起作用。 –

它應該根據SVG規範工作交叉文檔。這並不意味着你的UA已經實現了。 –

這是我有svg調用字體。 http://jsfiddle.net/slayerofgiants/mYzmT/而svg只包含字體信息http://jsfiddle.net/slayerofgiants/kQtwj/我可能沒有做到它正確或蘋果的ibook應用程序可能不支持它，因爲它是不在iPad上工作。感謝您的迴應。 –

如何在多個svg文件中使用字體字形？

回答

相關問題