html - Why my SVG font is not working? -
i have created svg font , converted ttf font. ttf font works correctly, svg font not - tested in chrome & firefox. here files have created:
myfont.svg:
<?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd" > <svg xmlns="http://www.w3.org/2000/svg"> <metadata>my font</metadata> <defs> <font id="myfont" horiz-adv-x="1024"> <font-face units-per-em="1024" ascent="960" descent="-64" /> <missing-glyph horiz-adv-x="1024" /> <glyph unicode="!" d="m513-64c513-64,124,320,124,576c124,789,298,960,513,960c727,960,901,789,901,576c901,320,513-64,513-64zm513,784c396,784,301,689,301,572c301,455,396,360,513,360c630,360,725,455,725,572c725,689,630,784,513,784z"></glyph> <glyph unicode=""" d="m854,235c854,235,854-64,854-64c854-64,598-64,598-64c598-64,598,235,598,235c598,235,555,235,555,235c555,235,555,448,555,448c555,543,632,619,726,619c820,619,896,543,896,448c896,448,896,235,896,235c896,235,854,235,854,235zm726,662c632,662,555,729,555,811c555,894,632,960,726,960c820,960,896,894,896,811c896,729,820,662,726,662zm427-64c427-64,171-64,171-64c171-64,171,235,171,235c171,235,128,235,128,235c128,235,128,448,128,448c128,543,205,619,299,619c393,619,470,543,470,448c470,448,470,235,470,235c470,235,427,235,427,235c427,235,427-64,427-64zm299,662c205,662,128,729,128,811c128,894,205,960,299,960c393,960,470,894,470,811c470,729,393,662,299,662z"></glyph> <glyph unicode="#" d="m118,960c118,960,906,960,906,960c906,960,906-64,906-64c906-64,880-56,512,133c164-42,118-64,118-64c118-64,118,960,118,960z"></glyph> <glyph unicode="$" d="m987,202c987,202,304,202,304,202c283,202,266,219,266,240c266,240,266,316,266,316c266,337,283,354,304,354c304,354,987,354,987,354c1008,354,1024,337,1024,316c1024,316,1024,240,1024,240c1024,219,1008,202,987,202zm987,505c987,505,304,505,304,505c283,505,266,522,266,543c266,543,266,619,266,619c266,640,283,657,304,657c304,657,987,657,987,657c1008,657,1024,640,1024,619c1024,619,1024,543,1024,543c1024,522,1008,505,987,505zm987,809c987,809,304,809,304,809c283,809,266,826,266,847c266,847,266,923,266,923c266,944,283,960,304,960c304,960,987,960,987,960c1008,960,1024,944,1024,923c1024,923,1024,847,1024,847c1024,826,1008,809,987,809zm76,202c34,202,0,236,0,278c0,320,34,354,76,354c118,354,152,320,152,278c152,236,118,202,76,202zm76,505c34,505,0,539,0,581c0,623,34,657,76,657c118,657,152,623,152,581c152,539,118,505,76,505zm76,809c34,809,0,843,0,885c0,927,34,960,76,960c118,960,152,927,152,885c152,843,118,809,76,809z"></glyph> <glyph unicode="%" d="m911,522c911,522,982,561,982,561c1004,573,1012,601,1000,623c1000,623,923,765,923,765c910,788,882,796,860,784c860,784,789,745,789,745c767,732,733,736,712,750c702,757,692,762,682,768c659,780,640,808,640,833c640,833,640,914,640,914c640,940,619,960,594,960c594,960,433,960,433,960c407,960,387,940,387,914c387,914,387,833,387,833c387,807,367,780,345,768c337,763,329,759,321,754c299,740,266,737,244,750c244,750,189,781,189,781c167,794,139,786,126,764c126,764,46,624,46,624c33,602,41,574,63,561c63,561,117,530,117,530c140,517,154,487,153,461c153,455,153,449,153,443c153,418,138,388,116,375c116,375,45,336,45,336c22,324,14,296,26,274c26,274,104,132,104,132c116,109,144,101,166,113c166,113,238,152,238,152c260,165,294,161,315,147c324,140,334,135,345,129c367,117,387,90,387,64c387,64,387-17,387-17c387-43,407-64,433-64c433-64,594-64,594-64c619-64,640-43,640-17c640-17,640,64,640,64c640,90,659,118,682,129c690,134,698,138,706,143c727,157,761,160,783,147c783,147,837,116,837,116c859,103,888,111,900,133c900,133,981,273,981,273c993,295,986,323,963,336c963,336,909,367,909,367c887,380,873,410,874,436c874,442,874,448,874,454c873,479,888,510,911,522zm513,287c424,287,352,359,352,448c352,538,424,610,513,610c602,610,674,538,674,448c674,359,602,287,513,287z"></glyph> <glyph unicode="&" d="m699,123c699,123,699,332,699,332c699,319,709,309,722,309c735,309,745,319,745,332c745,345,735,355,722,355c709,355,699,345,699,332c699,332,699,841,699,841c699,841,1024,960,1024,960c1024,960,1024,242,1024,242c1024,242,699,123,699,123zm908,286c921,286,931,296,931,309c931,322,921,332,908,332c895,332,885,322,885,309c885,296,895,286,908,286zm908,472c921,472,931,482,931,495c931,508,921,518,908,518c895,518,885,508,885,495c885,482,895,472,908,472zm815,262c828,262,838,273,838,286c838,298,828,309,815,309c802,309,792,298,792,286c792,273,802,262,815,262zm895,722c895,722,875,734,875,734c875,734,844,661,844,661c844,661,774,691,774,691c774,691,763,671,763,671c763,671,835,640,835,640c835,640,805,571,805,571c805,571,825,559,825,559c825,559,856,631,856,631c856,631,926,601,926,601c926,601,937,622,937,622c937,622,865,652,865,652c865,652,895,722,895,722zm955,425c942,425,931,415,931,402c931,389,942,379,955,379c968,379,978,389,978,402c978,415,968,425,955,425zm373,355c386,355,396,366,396,379c396,392,386,402,373,402c373,402,373,960,373,960c373,960,652,841,652,841c652,841,652,425,652,425c639,425,629,415,629,402c629,389,639,379,652,379c652,379,652,123,652,123c652,123,373,242,373,242c373,242,373,355,373,355zm559,425c572,425,582,436,582,448c582,461,572,472,559,472c546,472,536,461,536,448c536,436,546,425,559,425zm466,402c479,402,489,412,489,425c489,438,479,448,466,448c453,448,443,438,443,425c443,412,453,402,466,402zm0,841c0,841,326,960,326,960c326,960,326,242,326,242c326,242,0,123,0,123c0,123,0,841,0,841zm163,495c163,482,174,472,187,472c200,472,210,482,210,495c210,508,200,518,187,518c174,518,163,508,163,495zm280,309c293,309,303,319,303,332c303,345,293,355,280,355c267,355,256,345,256,332c256,319,267,309,280,309zm233,588c233,601,223,611,210,611c197,611,187,601,187,588c187,575,197,565,210,565c223,565,233,575,233,588zm187,286c200,286,210,296,210,309c210,322,200,332,187,332c174,332,163,322,163,309c163,296,174,286,187,286zm140,379c153,379,163,389,163,402c163,415,153,425,140,425c127,425,117,415,117,402c117,389,127,379,140,379zm117,611c130,611,140,622,140,635c140,648,130,658,117,658c104,658,94,648,94,635c94,622,104,611,117,611zm47,565c60,565,70,575,70,588c70,601,60,611,47,611c34,611,24,601,24,588c24,575,34,565,47,565z"></glyph> <glyph unicode="'" d="m699,123c699,123,699,332,699,332c699,319,709,309,722,309c735,309,745,319,745,332c745,345,735,355,722,355c709,355,699,345,699,332c699,332,699,841,699,841c699,841,1024,960,1024,960c1024,960,1024,242,1024,242c1024,242,699,123,699,123zm908,286c921,286,931,296,931,309c931,322,921,332,908,332c895,332,885,322,885,309c885,296,895,286,908,286zm908,472c921,472,931,482,931,495c931,508,921,518,908,518c895,518,885,508,885,495c885,482,895,472,908,472zm815,262c828,262,838,273,838,286c838,298,828,309,815,309c802,309,792,298,792,286c792,273,802,262,815,262zm895,722c895,722,875,734,875,734c875,734,844,661,844,661c844,661,774,691,774,691c774,691,763,671,763,671c763,671,835,640,835,640c835,640,805,571,805,571c805,571,825,559,825,559c825,559,856,631,856,631c856,631,926,601,926,601c926,601,937,622,937,622c937,622,865,652,865,652c865,652,895,722,895,722zm955,425c942,425,931,415,931,402c931,389,942,379,955,379c968,379,978,389,978,402c978,415,968,425,955,425zm373,355c386,355,396,366,396,379c396,392,386,402,373,402c373,402,373,960,373,960c373,960,652,841,652,841c652,841,652,425,652,425c639,425,629,415,629,402c629,389,639,379,652,379c652,379,652,123,652,123c652,123,373,242,373,242c373,242,373,355,373,355zm559,425c572,425,582,436,582,448c582,461,572,472,559,472c546,472,536,461,536,448c536,436,546,425,559,425zm466,402c479,402,489,412,489,425c489,438,479,448,466,448c453,448,443,438,443,425c443,412,453,402,466,402zm0,841c0,841,326,960,326,960c326,960,326,242,326,242c326,242,0,123,0,123c0,123,0,841,0,841zm163,495c163,482,174,472,187,472c200,472,210,482,210,495c210,508,200,518,187,518c174,518,163,508,163,495zm280,309c293,309,303,319,303,332c303,345,293,355,280,355c267,355,256,345,256,332c256,319,267,309,280,309zm233,588c233,601,223,611,210,611c197,611,187,601,187,588c187,575,197,565,210,565c223,565,233,575,233,588zm187,286c200,286,210,296,210,309c210,322,200,332,187,332c174,332,163,322,163,309c163,296,174,286,187,286zm140,379c153,379,163,389,163,402c163,415,153,425,140,425c127,425,117,415,117,402c117,389,127,379,140,379zm117,611c130,611,140,622,140,635c140,648,130,658,117,658c104,658,94,648,94,635c94,622,104,611,117,611zm47,565c60,565,70,575,70,588c70,601,60,611,47,611c34,611,24,601,24,588c24,575,34,565,47,565z"></glyph> <glyph unicode="(" d="m922,372c922,372,103,372,103,372c46,372,0,418,0,474c0,531,46,576,103,576c103,576,922,576,922,576c979,576,1024,531,1024,474c1024,418,979,372,922,372zm922,756c922,756,103,756,103,756c46,756,0,802,0,858c0,915,46,960,103,960c103,960,922,960,922,960c979,960,1024,915,1024,858c1024,802,979,756,922,756zm103,192c103,192,922,192,922,192c979,192,1024,147,1024,90c1024,34,979-12,922-12c922-12,103-12,103-12c46-12,0,34,0,90c0,147,46,192,103,192z"></glyph> <glyph unicode=")" d="m1013-64c964-112,885-112,836-64c836-64,578,194,578,194c528,171,472,158,414,158c192,158,12,338,12,559c12,781,192,960,414,960c635,960,815,781,815,559c815,488,796,422,763,364c763,364,1013,114,1013,114c1062,65,1062-15,1013-64zm414,760c303,760,213,670,213,559c213,449,303,359,414,359c524,359,614,449,614,559c614,670,524,760,414,760z"></glyph> <glyph unicode="*" d="m938,164c938,164,999-31,999-31c999-31,786,16,786,16c707-34,613-64,512-64c230-64,0,166,0,448c0,731,230,960,512,960c795,960,1024,731,1024,448c1024,343,993,246,938,164z"></glyph> <glyph unicode="+" d="m794,958c778,960,762,960,748,960c632,960,576,915,512,845c449,915,393,960,277,960c263,960,247,960,231,958c130,949,15,865,0,703c0,703,0,650,0,650c14,495,141,304,512,65c884,304,1011,495,1024,650c1024,650,1024,703,1024,703c1010,865,894,949,794,958z"></glyph> <glyph unicode="," d="m512,960c795,960,1024,731,1024,448c1024,166,795-64,512-64c230-64,0,166,0,448c0,731,230,960,512,960z"></glyph> <glyph unicode="-" d="m1024,346c1024,327,1009,312,990,312c990,312,990,124,990,124c990,124,990,107,990,107c990,88,975,73,956,73c956,73,837,73,837,73c818,73,803,88,803,107c803,107,803,124,803,124c803,124,803,312,803,312c784,312,769,327,769,346c769,346,768,346,768,346c768,346,768,346,768,346c768,346,768,363,768,363c768,363,768,508,768,508c768,566,826,585,896,585c967,585,1024,566,1024,508c1024,508,1024,363,1024,363c1024,363,1024,346,1024,346c1024,346,1024,346,1024,346c1024,346,1024,346,1024,346zm896,619c835,619,786,669,786,730c786,791,835,841,896,841c958,841,1007,791,1007,730c1007,669,958,619,896,619zm700,244c700,225,685,210,666,210c666,210,649,210,649,210c649,210,649,37,649,37c649,37,649,0,649,0c649,0,649-12,649-12c649-31,634-46,615-46c615-46,410-46,410-46c391-46,376-31,376-12c376-12,376,0,376,0c376,0,376,37,376,37c376,37,376,210,376,210c376,210,359,210,359,210c340,210,325,225,325,244c325,244,325,261,325,261c325,261,325,295,325,295c325,295,325,548,325,548c325,628,409,653,512,653c616,653,700,628,700,548c700,548,700,261,700,261c700,261,700,261,700,261c700,261,700,244,700,244zm512,687c437,687,376,749,376,824c376,899,437,960,512,960c588,960,649,899,649,824c649,749,588,687,512,687zm222,312c222,312,222,124,222,124c222,124,222,107,222,107c222,88,207,73,188,73c188,73,69,73,69,73c50,73,35,88,35,107c35,107,35,124,35,124c35,124,35,312,35,312c16,312,1,327,1,346c1,346,0,346,0,346c0,346,0,346,0,346c0,346,0,363,0,363c0,363,0,508,0,508c0,566,58,585,128,585c199,585,256,566,256,508c256,508,256,363,256,363c256,363,256,346,256,346c256,346,256,346,256,346c256,346,256,346,256,346c256,327,241,312,222,312zm128,619c67,619,18,669,18,730c18,791,67,841,128,841c190,841,239,791,239,730c239,669,190,619,128,619z"></glyph> <glyph unicode="." d="m1024,760c1024,724,996,696,960,696c954,696,948,696,942,698c942,698,886,541,886,541c886,541,139,541,139,541c139,541,83,698,83,698c77,696,71,696,64,696c29,696,0,724,0,760c0,796,29,824,64,824c100,824,128,796,128,760c128,749,126,738,120,729c120,729,216,658,302,685c395,714,479,841,479,841c461,853,448,873,448,896c448,932,477,960,512,960c548,960,576,932,576,896c576,873,564,853,546,841c546,841,611,712,696,685c790,655,905,729,905,729c899,738,896,749,896,760c896,796,925,824,960,824c996,824,1024,796,1024,760zm158,488c158,488,250,252,250,252c255,234,272,212,289,212c289,212,736,212,736,212c753,212,770,234,775,252c775,252,867,488,867,488c867,488,158,488,158,488z"></glyph> <glyph unicode="/" d="m956,251c956,251,69,251,69,251c31,251,0,281,0,319c0,319,0,892,0,892c0,930,31,960,69,960c69,960,956,960,956,960c994,960,1024,930,1024,892c1024,892,1024,319,1024,319c1024,281,994,251,956,251zm315,865c315,865,110,865,110,865c110,865,110,756,110,756c110,756,315,756,315,756c315,756,315,865,315,865zm683,879c555,879,451,775,451,646c451,518,555,414,683,414c811,414,915,518,915,646c915,775,811,879,683,879zm683,496c600,496,533,564,533,646c533,729,600,797,683,797c766,797,833,729,833,646c833,564,766,496,683,496z"></glyph> <glyph unicode="0" d="m547,267c547,267,546,269,546,269c546,269,546,267,546,267c546,267,397,267,397,267c397,267,397,396,397,396c397,396,397,396,397,396c397,396,397,397,397,397c397,397,397,399,397,399c397,399,399,399,399,399c399,399,874,960,874,960c874,960,1024,831,1024,831c1024,831,547,267,547,267zm149,746c149,746,149,118,149,118c149,118,760,118,760,118c760,118,760,414,760,414c760,414,909,591,909,591c909,591,909,85,909,85c909,22,857-30,793-30c793-30,116-30,116-30c52-30,0,22,0,85c0,85,0,779,0,779c0,843,52,895,116,895c116,895,730,895,730,895c730,895,604,746,604,746c604,746,149,746,149,746z"></glyph> <glyph unicode="1" d="m512-64c230-64,0,166,0,448c0,731,230,960,512,960c795,960,1024,731,1024,448c1024,166,795-64,512-64zm512,946c238,946,15,723,15,448c15,174,238-49,512-49c787-49,1010,174,1010,448c1010,723,787,946,512,946z"></glyph> <glyph unicode="2" d="m512-64c230-64,0,166,0,448c0,731,230,960,512,960c795,960,1024,731,1024,448c1024,166,795-64,512-64zm512,926c249,926,35,712,35,448c35,185,249-29,512-29c776-29,990,185,990,448c990,712,776,926,512,926zm547,364c547,364,547,363,547,363c547,363,478,363,478,363c478,363,478,431,478,431c478,431,485,431,485,431c485,431,699,688,699,688c699,688,769,627,769,627c769,627,548,363,548,363c548,363,547,364,547,364zm376,585c376,585,376,295,376,295c376,295,649,295,649,295c649,295,649,430,649,430c649,430,717,512,717,512c717,512,717,295,717,295c717,257,687,227,649,227c649,227,376,227,376,227c338,227,308,257,308,295c308,295,308,585,308,585c308,623,338,653,376,653c376,653,624,653,624,653c624,653,566,585,566,585c566,585,376,585,376,585z"></glyph> <glyph unicode="3" d="m512-64c230-64,0,166,0,448c0,731,230,960,512,960c795,960,1024,731,1024,448c1024,166,795-64,512-64zm768,704c768,713,761,720,752,720c752,720,240,720,240,720c232,720,224,713,224,704c224,704,224,368,224,368c224,360,232,352,240,352c240,352,752,352,752,352c761,352,768,360,768,368c768,368,768,704,768,704zm832,320c832,329,825,336,816,336c816,336,176,336,176,336c168,336,160,329,160,320c160,320,160,256,160,256c160,248,168,240,176,240c176,240,816,240,816,240c825,240,832,248,832,256c832,256,832,320,832,320zm784,256c784,256,720,256,720,256c712,256,704,264,704,272c704,272,704,304,704,304c704,313,712,320,720,320c720,320,784,320,784,320c793,320,800,313,800,304c800,304,800,272,800,272c800,264,793,256,784,256zm680,256c676,256,672,260,672,264c672,264,672,312,672,312c672,317,676,320,680,320c685,320,688,317,688,312c688,312,688,264,688,264c688,260,685,256,680,256zm600,256c600,256,520,256,520,256c516,256,512,260,512,264c512,264,512,312,512,312c512,317,516,320,520,320c520,320,600,320,600,320c605,320,608,317,608,312c608,312,608,264,608,264c608,260,605,256,600,256zm720,384c720,384,272,384,272,384c264,384,256,392,256,400c256,400,256,672,256,672c256,681,264,688,272,688c272,688,720,688,720,688c729,688,736,681,736,672c736,672,736,400,736,400c736,392,729,384,720,384z"></glyph> </font> </defs> </svg> myfont.css:
@font-face { font-family: "myfont"; src: url("myfont.svg#myfont") format("svg"); font-weight: normal; font-style: normal; } [class*="icon-"]{ font-family: "myfont"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-pin:before{ content: '\0021'; } .icon-two-users:before{ content: '\0022'; } .icon-ribbon:before{ content: '\0023'; } .icon-list:before{ content: '\0024'; } .icon-cog:before{ content: '\0025'; } .icon-map-blue:before{ content: '\0026'; } .icon-map-green:before{ content: '\0027'; } .icon-hamburger-menu:before{ content: '\0028'; } .icon-search:before{ content: '\0029'; } .icon-notifications:before{ content: '\002a'; } .icon-like-small:before{ content: '\002b'; } .icon-cup:before{ content: '\002c'; } .icon-three-users:before{ content: '\002d'; } .icon-crown:before{ content: '\002e'; } .icon-camera:before{ content: '\002f'; } .icon-leave-tip:before{ content: '\0030'; } .icon-border:before{ content: '\0031'; } .icon-leave-tip-big:before{ content: '\0032'; } .icon-tech-startup:before{ content: '\0033'; } myfont.html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>r</title> <link rel='stylesheet' href='myfont.css'> </head> <body> <i class="icon-pin"></i> <i class="icon-two-users"></i> </body> </html> i see ! , " characters instead of icons. when change url("myfont.svg#myfont") format("svg"); url("myfont.ttf") format("truetype"); works expected (myfont.ttf myfont.svg converted ttf using node.js module https://www.npmjs.org/package/svg2ttf. strange ttf generated svg works , svg not...
firefox , ie have never supported svg fonts , chrome dropped feature in recent versions.
svg fonts not powerful enough support complex scripts of common languages. e.g. hindi
Comments
Post a Comment