大多数浏览器是否无法识别 svg 文件中定义的字体字形？
Do most browsers not recognize font glyphs defined in svg files?
我有几个带有特定字符嵌入字体字形的 svg 文件。如果用户在他们的机器上安装了字体，浏览器会正确显示字体。然而，如果它目前没有安装在机器上，字形就不会被翻译成正确的字体。浏览器不支持吗？或者也许我做的不正确？我正在使用的字形在下方用于字体 "Opus Text" 和 "utsaah".
<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="Opus Text" 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="407" d="M0,-18l304,1086l103,0l-303,-1086z"/>
<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>
这是带有字形的代码笔。它们不会出现在 Internet Explorer、Edge 或 chrome 中。 http://codepen.io/cmgdesignstudios/pen/bVbOmG?editors=101
从评论来看，大多数浏览器不支持svg字体字形。当矢量 Web 图形中需要特定字符时，最佳做法是将字符字形编码为路径元素。
这消除了对 svg 字体字形的浏览器支持的需要，并且消除了用户在其系统上安装字体的需要。
编码为路径元素的字符将确保大多数设备正确显示字符。
我有几个带有特定字符嵌入字体字形的 svg 文件。如果用户在他们的机器上安装了字体，浏览器会正确显示字体。然而，如果它目前没有安装在机器上，字形就不会被翻译成正确的字体。浏览器不支持吗？或者也许我做的不正确？我正在使用的字形在下方用于字体 "Opus Text" 和 "utsaah".
<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="Opus Text" 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="407" d="M0,-18l304,1086l103,0l-303,-1086z"/>
<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>
这是带有字形的代码笔。它们不会出现在 Internet Explorer、Edge 或 chrome 中。 http://codepen.io/cmgdesignstudios/pen/bVbOmG?editors=101
从评论来看，大多数浏览器不支持svg字体字形。当矢量 Web 图形中需要特定字符时，最佳做法是将字符字形编码为路径元素。
这消除了对 svg 字体字形的浏览器支持的需要，并且消除了用户在其系统上安装字体的需要。
编码为路径元素的字符将确保大多数设备正确显示字符。