CSS @ font-face ไม่ทำงานกับ Firefox แต่ทำงานกับ Chrome และ IE

รหัสต่อไปนี้ใช้งานได้ใน Google Chrome เบต้าเช่นเดียวกับ IE 7 อย่างไรก็ตาม Firefox ดูเหมือนจะมีปัญหากับสิ่งนี้ ฉันสงสัยว่ามันจะเป็นปัญหาของไฟล์ CSS ของฉันรวมอยู่ด้วยทำให้ฉันรู้ว่า Firefox ไม่เป็นมิตรกับการนำเข้าข้ามโดเมน

แต่ทั้งหมดนี้เป็นเพียง HTML คงที่และไม่มีคำถามเกี่ยวกับข้ามโดเมน

บนหน้า Landing Page ของฉันฉันจะนำเข้า CSS เช่นนี้:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

ภายใน main.css ฉันมีการนำเข้าอีกเช่น:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

และใน type.css ฉันมีการประกาศดังต่อไปนี้:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

ฉันมีไดเรกทอรีชื่อ "font" ในตำแหน่งเดียวกับ type.css ไดเรกทอรีฟอนต์นี้มีไฟล์ woff / ttf / svg ทั้งหมดเป็นต้น

ฉันนิ่งงันกับสิ่งนี้ มันทำงานได้ใน Chrome และ IE แต่ไม่ได้อยู่ใน Firefox เป็นไปได้อย่างไร? ฉันพลาดอะไรไป

เว็บไซต์ที่แสดงผลในท้องถิ่น ( file:///)

Firefox มาพร้อมกับfile:///นโยบาย"แหล่งกำเนิดไฟล์ uri" ที่เข้มงวดมากโดยค่าเริ่มต้น: เพื่อให้มันทำงานเหมือนกับเบราว์เซอร์อื่น ๆ ไปที่about:configกรองfileuriและสลับการตั้งค่าต่อไปนี้:

security.fileuri.strict_origin_policy

ตั้งค่าเป็นเท็จและคุณควรโหลดทรัพยากรแบบอักษรในเครื่องผ่านระดับพา ธ ที่ต่างกัน

เว็บไซต์ที่เผยแพร่

ตามความคิดเห็นของฉันด้านล่างและคุณประสบปัญหานี้หลังจากการปรับใช้ไซต์ของคุณคุณสามารถลองเพิ่มส่วนหัวเพิ่มเติมเพื่อดูว่าปัญหาของคุณกำหนดค่าตัวเองเป็นปัญหาข้ามโดเมน: ไม่ควรเนื่องจากคุณระบุเส้นทางที่เกี่ยวข้อง แต่ฉันจะลองต่อไป: ในไฟล์. htaccess ระบุว่าคุณต้องการส่งส่วนหัวเพิ่มเติมสำหรับแต่ละไฟล์. ttf / .otf / .eot ที่มีการร้องขอ:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

ตรงไปตรงมาฉันจะไม่คาดหวังว่ามันจะสร้างความแตกต่าง แต่ก็ง่ายพอสมควรที่จะลอง: อื่น ๆ ลองใช้การเข้ารหัส base64สำหรับแบบอักษรแบบอักษรของคุณน่าเกลียด แต่ก็อาจใช้ได้เช่นกัน

สรุปที่ดีมีอยู่ที่นี่

นอกจากการเพิ่มสิ่งต่อไปนี้ใน. htaccess ของคุณ: (ขอบคุณ @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

คุณอาจต้องการลองเพิ่มประเภท webfont mime ให้กับไฟล์. htaccess อย่างชัดเจน ... เช่นนี้:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

ในท้ายที่สุดไฟล์. htaccess ของฉันจะมีลักษณะดังนี้ (สำหรับส่วนที่ทำให้ webfonts สามารถทำงานกับเบราว์เซอร์ทั้งหมดได้)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

ฉันมีปัญหานี้เช่นกัน ฉันพบคำตอบได้ที่นี่: http://www.dynamicdrive.com/forums/showthread.php?t=63628

นี่คือตัวอย่างของโซลูชันที่ใช้งานกับ firefox คุณต้องเพิ่มบรรทัดนี้ในฟอนต์ face css ของคุณ:

src: local(font name), url("font_name.ttf");

ฉันจะออกจากที่นี่เพราะเพื่อนร่วมงานของฉันพบวิธีแก้ปัญหาสำหรับ "แบบอักษรหน้าไม่เกี่ยวข้องกับ firefox แต่ทุกที่อื่น" ปัญหา

ปัญหาคือเพียง Firefox ยุ่งกับการประกาศแบบอักษรตระกูลนี้สิ้นสุดการแก้ไข:

body{ font-family:"MyFont" !important; }

PS: ฉันใช้ html5boilerplate ด้วย

ฉันมีปัญหาเดียวกัน ตรวจสอบรหัสของคุณอีกครั้งสำหรับ H1, H2 หรือรูปแบบที่คุณกำหนดเป้าหมายด้วยกฎ @ font-face ฉันพบว่าฉันไม่มีอาการโคม่าหลังจากfont-family: 'custom-font-family' Arial, Helvetica etcมันปรากฏขึ้นได้ดีในทุกเบราว์เซอร์นอกเหนือจาก Firefox ฉันเพิ่มอาการโคม่าและใช้งานได้

ฉันมีปัญหาเดียวกันทั้งหมด ฉันต้องสร้างโฟลเดอร์ใหม่ที่ชื่อว่า "แบบอักษร" และวางไว้ใน wp_content ฉันสามารถเข้าถึงได้จากเบราว์เซอร์ของฉันเช่นhttp://www.example.com/wp-content/fonts/CANDY.otf

ก่อนหน้านี้โฟลเดอร์ฟอนต์อยู่ในไดเรกทอรีเดียวกับไฟล์ CSS ของฉันและ @ font-face หน้าตาแบบนี้:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

ดังที่ฉันได้กล่าวไปแล้วสิ่งนี้ไม่ได้ทำงานใน Firefox แต่ใช้กับ Chrome เท่านั้น ตอนนี้มันทำงานได้เพราะฉันใช้เส้นทางที่แน่นอน:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

ฉันมีปัญหาตรงนี้ที่ใช้ ff4 ในเครื่อง mac ฉันมีเซิร์ฟเวอร์การพัฒนาในท้องถิ่นกำลังทำงานอยู่และการประกาศ @ font-face ของฉันทำงานได้ดี ฉันย้ายไปใช้ชีวิตและ FF จะ 'แฟลช' ประเภทที่ถูกต้องในการโหลดหน้าแรก แต่เมื่อการนำทางที่ลึกกว่าแบบอักษรเริ่มต้นไปที่สไตล์ชีทของเบราว์เซอร์

ฉันพบวิธีแก้ปัญหาในการเพิ่มการประกาศต่อไปนี้เพื่อ. htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

พบผ่าน

ทางออกที่ง่ายอย่างหนึ่งที่ยังไม่ได้กล่าวถึงคือการฝังแบบอักษรลงในไฟล์ css โดยตรงโดยใช้การเข้ารหัส base64

หากคุณใช้ fontsquirrel.com ในตัวสร้างชุดแบบอักษรหน้าเลือกโหมดผู้เชี่ยวชาญเลื่อนลงและเลือกรหัสBase64ภายใต้ตัวเลือก CSS - ชุดแบบอักษรที่ดาวน์โหลดจะพร้อมที่จะเสียบแล้วเล่น

สิ่งนี้ยังมีประโยชน์เพิ่มเติมในการลดเวลาในการโหลดหน้าเว็บเนื่องจากต้องการการร้องขอ http ที่น้อยลง

ฉันจะพูดถึงว่าแบบอักษรบางอย่างมีปัญหาใน Firefox ถ้าชื่อไฟล์ของพวกเขามีตัวละครที่เฉพาะเจาะจง ฉันเพิ่งพบปัญหากับตัวอักษร 'Modulus' ซึ่งมีชื่อไฟล์ '237D7B_0_0' การลบเครื่องหมายขีดล่างในชื่อไฟล์และอัปเดต css เพื่อให้ตรงกับชื่อไฟล์ใหม่แก้ปัญหานี้ได้ แบบอักษรอื่น ๆ ที่มีตัวอักษรที่คล้ายกันไม่มีปัญหานี้ซึ่งเป็นเรื่องแปลกมาก ... อาจเป็นข้อผิดพลาดใน Firefox ฉันขอแนะนำให้เก็บชื่อไฟล์ไว้ที่ตัวอักษรและตัวเลขเท่านั้น

สำหรับแบบอักษรนี้โดยเฉพาะคุณควรใช้ Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

หากคุณยังต้องการใช้ชุดเครื่องมือสร้างตัวอักษรของ FontSquirrel ให้ใช้ตัวเลือกการแฮ็กยิ้มเพื่อกำจัดปัญหาตัวอักษรในเครื่อง หลังจากที่คุณสร้างชุดตรวจสอบว่า demo.html ที่สร้างขึ้นทำงานใน FireFox ฉันพนันได้เลยว่ามัน ตอนนี้อัปโหลดไปยังเซิร์ฟเวอร์ของคุณ - ฉันคิดว่ามันใช้งานได้ดีเนื่องจาก FontSquirrel ยอดเยี่ยมมาก

อย่างไรก็ตามหากคุณทำลายรหัสคิทที่สร้างขึ้นในขณะที่รวมเข้ากับโครงการของคุณให้ใช้วิธีการมาตรฐานในการดีบัก - ตรวจสอบ 404 และไปทีละบรรทัดจนกว่าคุณจะพบปัญหา WOFF ควรทำงานใน FF อย่างแน่นอนดังนั้นจึงเป็นจุดเริ่มต้นที่ดี

ในที่สุดหากไม่มีสิ่งใดทำงานให้อัปเดต FireFox ฉันเขียนทั้งหมดนี้โดยสมมติว่าคุณกำลังใช้สิ่งล่าสุดอยู่ แต่คุณไม่ได้ระบุเวอร์ชันที่คุณกำลังเช็คอินดังนั้นอาจเป็นปัญหาของคุณได้เช่นกัน

ลองทำการประกาศแหล่งข้อมูลท้องถิ่นใน@font-faceคำสั่งของคุณ

มีข้อบกพร่องที่ทราบใน Firefox หรือ Google Font API ที่ป้องกันไม่ให้ตัวแปรของแบบอักษรถูกใช้หากติดตั้งแบบอักษรในเครื่องและตรงกับชื่อท้องถิ่นที่กำหนด:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

หากต้องการทำให้การประกาศโลคัลอย่างมีประสิทธิภาพเพียงแค่ทำให้สตริงต้นทางโลคัลของคุณไร้สาระ แบบแผนที่ยอมรับกันโดยทั่วไปสำหรับสิ่งนี้คือการใช้อักขระยูนิโค้ดยิ้ม ( "☺") ทำไม? Paul Irish มีคำอธิบายที่ดีในบล็อกของเขา:

http://paulirish.com/2010/font-face-gotchas/#smiley

คุณกำลังทดสอบสิ่งนี้ในไฟล์ในเครื่องหรือปิดเว็บเซิร์ฟเวอร์หรือไม่? ไฟล์ในไดเรกทอรีที่แตกต่างกันถือเป็นโดเมนที่แตกต่างกันสำหรับกฎข้ามโดเมนดังนั้นหากคุณกำลังทดสอบในเครื่องคุณอาจตีข้ามข้อ จำกัด ข้ามโดเมนได้

มิฉะนั้นอาจช่วยชี้ไปยัง URL ที่เกิดปัญหาได้

นอกจากนี้ฉันขอแนะนำให้ดูที่คอนโซลข้อผิดพลาด Firefox เพื่อดูว่ามีการรายงานข้อผิดพลาดทางไวยากรณ์ CSS หรือข้อผิดพลาดอื่น ๆ

นอกจากนี้ฉันยังทราบว่าคุณอาจต้องการตัวอักษรน้ำหนัก: ตัวหนาในกฎ @ font-face ที่สอง

การใช้กฎอนุญาตการควบคุมการเข้าถึง. htaccess ให้กำเนิดไม่ได้ผลสำหรับฉันเมื่อฉันพบปัญหานี้

แต่ใน IIS ใน web.config ให้แทรกบล็อก system.webServer ดังที่แสดงด้านล่าง

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

สิ่งนี้ได้ผลเหมือนมนต์เสน่ห์สำหรับฉัน หากคุณต้องการ จำกัด การเข้าถึงเฉพาะบางโดเมนให้แทนที่ * ด้วยโดเมน

ฉันมีปัญหาเดียวกันในการรับแบบอักษรให้แสดงอย่างถูกต้องใน Firefox นี่คือสิ่งที่ฉันพบว่าทำงานให้ฉัน เพิ่มเครื่องหมายทับก่อนไดเรกทอรีที่ถือแบบอักษรในแอตทริบิวต์ url นี่คือรุ่นก่อนและหลังของฉัน:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

สังเกตุสแลชชั้นนำก่อนหน้า 'แบบอักษร' ใน URL หรือไม่ สิ่งนี้บอกให้เบราว์เซอร์เริ่มต้นที่ไดเรกทอรีรากแล้วเข้าถึงทรัพยากร อย่างน้อยสำหรับฉัน - ปัญหาได้รับการแก้ไข

หากคุณกำลังพยายามนำเข้าแบบอักษรภายนอกคุณต้องเผชิญกับปัญหาที่พบบ่อยที่สุดอย่างหนึ่งของ Firefox และเบราว์เซอร์อื่น ๆ บางครั้งตัวอักษรของคุณทำงานได้ดีใน google Chrome หรือเบราว์เซอร์อื่น แต่ไม่ใช่ในทุกเบราว์เซอร์

มีเหตุผลมากมายสำหรับข้อผิดพลาดประเภทนี้หนึ่งในสาเหตุที่ใหญ่ที่สุดของปัญหานี้คือแบบอักษรที่กำหนดไว้ก่อนหน้า คุณต้องเพิ่ม! คีย์เวิร์ดสำคัญหลังจากสิ้นสุดโค้ด CSS แต่ละบรรทัดดังนี้:

ตัวอย่าง:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

คำอธิบาย: ป้อนรหัสข้างต้นในไฟล์ CSS หรือรหัสของคุณที่นี่ ในตัวอย่างด้านบนแทนที่ "Hacen Saudi Arabia" ด้วยตระกูลฟอนต์ของคุณและแทนที่ URL ตามไดเรกทอรีฟอนต์ของคุณ

หากคุณป้อน! สำคัญในเบราว์เซอร์รหัส css ของคุณจะเน้นที่ส่วนนี้โดยอัตโนมัติและแทนที่คุณสมบัติที่เคยใช้ก่อนหน้านี้ สำหรับรายละเอียดเพิ่มเติมเยี่ยมชม: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

คุณช่วยตรวจสอบด้วย firebug ถ้าคุณได้รับ 404 บ้างไหม? ฉันพบปัญหาในการส่งผ่านและพบว่าส่วนขยายเหมือนกัน แต่ linux file.ttf นั้นแตกต่างจาก fileTTF ... และทำงานได้กับเบราว์เซอร์ทั้งหมดยกเว้น firefox

หวังว่าจะช่วย!

นี่เป็นปัญหาเกี่ยวกับวิธีการตั้งค่าเส้นทางแบบอักษรของคุณ เนื่องจากคุณไม่ได้เริ่มต้นเส้นทางด้วย "/" Firefox จะพยายามค้นหาแบบอักษรตามเส้นทางของสไตล์ชีทดังนั้นโดยพื้นฐาน Firefox จึงมองหาแบบอักษรของคุณในไดเรกทอรี "root / css / font" แทน ไดเรกทอรี "root / font" คุณสามารถแก้ไขได้อย่างง่ายดายโดยย้ายโฟลเดอร์แบบอักษรไปยังโฟลเดอร์ css หรือเพิ่ม / ไปยังจุดเริ่มต้นของเส้นทางแบบอักษรของคุณ

ลองใช้ดู

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

ลองสิ่งนี้ ....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

ฉันมีปัญหาที่คล้ายกัน หน้าตัวอย่างของแบบอักษรกระรอกกำลังทำงานใน FF แต่ไม่ใช่หน้าของตัวเองถึงแม้ว่าไฟล์ทั้งหมดมาจากโดเมนเดียวกัน!

ปรากฎว่าฉันกำลังเชื่อมโยงสไตล์ชีทของฉันกับ URL สัมบูรณ์ (http://example.com/style.css) ดังนั้น FF จึงคิดว่ามันมาจากโดเมนอื่น เปลี่ยนลิงค์สไตล์ของฉัน href เป็น /style.css แทนสิ่งที่คงที่สำหรับฉัน

บางทีปัญหาของคุณอาจเป็นปัญหาการตั้งชื่อโดยเฉพาะอย่างยิ่งเกี่ยวกับการใช้ (หรือไม่) ของช่องว่างและยัติภังค์

ฉันมีปัญหา similair ซึ่งฉันคิดว่าฉันได้รับการแก้ไขโดยการใส่ตัวเลือกคำพูด ( ') รอบ font- / ชื่อครอบครัว แต่ที่จริงโดยปริยายแก้ไขปัญหาการตั้งชื่อ

ฉันไม่ทันสมัยเกี่ยวกับข้อมูลจำเพาะ CSS อย่างสมบูรณ์และมีบางอย่างที่คลุมเครือในการตีความข้อกำหนดของลูกค้า นอกจากนี้ดูเหมือนว่าจะเกี่ยวข้องกับการตั้งชื่อ PostScript แต่โปรดแก้ไขให้ถูกต้องหากฉันผิด!

อย่างไรก็ตามตามที่ฉันเข้าใจแล้วการประกาศของคุณใช้ส่วนผสมที่แตกต่างกันสองรสชาติ

@font-face {
  font-family: "DroidSerif Regular";

หากคุณต้องการพิจารณาDroidชื่อจริงของครอบครัวซึ่งSansและSerifเป็นสมาชิกเช่นเดียวกับบุตรหลานSans NormalหรือSerif Boldจากนั้นคุณสามารถใช้ช่องว่างทุกที่เพื่อระบุตัวตนหรือคุณลบช่องว่างและใช้ CamelCasing สำหรับ familyName และยัติภังค์สำหรับตัวระบุย่อย

นำไปใช้กับการประกาศของคุณจะมีลักษณะเช่นนี้:

@font-face {
  font-family: "Droid Serif Regular";

หรือ

@font-face {
  font-family: DroidSerif-Regular;

ฉันคิดว่าทั้งคู่ควรถูกกฎหมายอย่างสมบูรณ์ไม่ว่าจะมีหรือไม่มีการเสนอราคา แต่ฉันได้ประสบความสำเร็จในการผสมผสานระหว่างลูกค้าหลายราย บางทีวันหนึ่งฉันมีเวลาหารายละเอียดเกี่ยวกับ isseu / s เหล่านี้ /

ฉันพบบทความนี้มีประโยชน์ในการทำความเข้าใจกับบางแง่มุมที่เกี่ยวข้อง: http://mathiasbynens.be/notes/unquoted-font-family

บทความนี้มีรายละเอียดเพิ่มเติมเกี่ยวกับ PostScript โดยเฉพาะและลิงก์ไปยังข้อมูลจำเพาะ Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

ไม่จำเป็นต้องยุ่งกับการตั้งค่าเพียงแค่ลบเครื่องหมายคำพูดและช่องว่างออกจากตระกูลฟอนต์:

นี้

body {font-family: "DroidSerif Regular", serif; }

กลายเป็นสิ่งนี้

body {font-family: DroidSerifRegular, serif; }

ในกรณีของฉันฉันแก้ปัญหาด้วยการแทรกโค้ดลักษณะตัวอักษร

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty ในส่วนหัวใน index.html หรือหน้า php ของคุณในแท็กสไตล์ ใช้งานได้สำหรับฉัน!

เนื่องจากสิ่งนี้เป็นหนึ่งในผลลัพธ์อันดับต้น ๆ ของ Google สำหรับปัญหานี้ฉันต้องการเพิ่มสิ่งที่แก้ไขปัญหานี้ให้ฉัน:

ฉันต้องลบรูปแบบ (opentype) ออกจาก src ของ font-face จากนั้นก็ทำงานใน Firefox เช่นกัน มันทำงานได้ดีใน Chrome และ Safari มาก่อน

อาจไม่ใช่เพราะรหัสของคุณอาจเป็นเพราะการกำหนดค่า Firefox ของคุณ

ลองใช้วิธีนี้จากTool bar WesternถึงUnicode

View > Text Encoding > Unicode

ฉันมีปัญหาเดียวกันและแก้ไขได้โดยเพิ่มเมตาสำหรับเนื้อหา:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

สิ่งนี้เกิดขึ้นใน Firefox และ Edge หากคุณมี Unicode text ใน html ของคุณ

ฉันไม่ทราบว่าคุณสร้างไวยากรณ์ได้อย่างไรขณะที่ฉันใช้ svg ในการประกาศแบบอักษร แต่ Font Squirel มีเครื่องมือที่ดีมากในการสร้างรูปแบบไวยากรณ์ของ bullet Proof แบบตัวอักษรจากแบบอักษรเดียว

http://www.fontsquirrel.com/fontface/generator

อาจเป็นการใช้ URL ในเส้นทางของแท็ก font-face หากคุณใช้ "http://domain.com" จะไม่ทำงานใน Firefox สำหรับฉันเปลี่ยนเป็น "http://www.domain.com" ได้

ปัญหาของฉันคือว่า Windows ตั้งชื่อแบบอักษร 'font.TTF' และ firefox ที่คาดไว้ 'font.ttf' ฉันเห็นว่าหลังจากเปิดโครงการของฉันใน linux เปลี่ยนชื่อแบบอักษรเป็นชื่อ propper และทุกอย่างทำงานได้