2

SVG フォントを作成し、それを ttf フォントに変換しました。Ttf フォントは正しく動作しますが、svg フォントは動作しません - Chrome と Firefox でテスト済み。私が作成したファイルは次のとおりです。

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="&#33" 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="&#34;" 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="&#35;" 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="&#36;" 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="&#37;" 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="&#38;" 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="&#39;" 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="&#40;" 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="&#41;" 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="&#42;" 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="&#43;" 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="&#44;" 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="&#45;" 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="&#46;" 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="&#47;" 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="&#48;" 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="&#49;" 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="&#50;" 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="&#51;" 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>

アイコンの代わりに文字が!表示されます。"に変更url("myFont.svg#myfont") format("svg");するurl("myFont.ttf") format("truetype");と、期待どおりに動作します（node.js モジュールhttps://www.npmjs.org/package/svg2ttfmyFont.ttfを使用するようにmyFont.svg変換されます。したがって、svg から生成された ttf が機能し、svg 自体が機能しないのは奇妙です...ttf

4

3 に答える 3

2

ブラウザの開発ツールを確認してください。SVG ファイルの読み込み中にエラーが発生しましたか? [ネット] タブに読み込まれたファイルとして表示されますか?

ローカルホストでテストしていますか、それともリモート Web サーバーから離れていますか? 後者の場合は、開発ツールの [ネット] タブをチェックして、SVG ファイルが正しい MIME タイプ ("image/svg+xml") で提供されていることを確認してください。

于 2014-11-19T15:41:52.627 に答える
0

ほとんどのブラウザー/デバイスの組み合わせでフォントを表示するには、より複雑な @font-face 宣言が必要です。これは、Wikipedia: Web Typography - Alternativesに示されているように、さまざまなフォント形式のブラウザー サポートが少し複雑であるため、SVGを参照してください。 、WOFF、TTF、WOFF2およびEOT

しかし、物事をよりシンプルにするために、より強力であるが複雑でもあるIcoMoonや、最初に試す必要のあるFontelloなどのサービスを使用して、svg フォントをアップロードし、さまざまなフォント ファイルを作成することができます。オプションが多すぎる場合は、IcoMoon のドキュメントまたはFontello のドキュメントを参照してください。

他の 2 つのオプションは、grunt を介して単一の svg ファイルからフォントを生成することです。 Grunt を使用したアイコン フォントの構築を参照してください。または、 GruntIconと呼ばれる PNG フォールバックで別のアプローチを使用します。

于 2015-02-26T08:50:26.637 に答える