คำถามติดแท็ก font-face

มีวิธีเพิ่มแบบอักษรที่กำหนดเองบนเว็บไซต์โดยไม่ใช้รูปภาพแฟลชหรือกราฟิกอื่น ๆ หรือไม่ ตัวอย่างเช่นฉันทำงานในเว็บไซต์งานแต่งงานและฉันพบแบบอักษรที่ดีมากมายสำหรับหัวเรื่องนั้น แต่ฉันไม่พบวิธีที่ถูกต้องในการเพิ่มแบบอักษรนั้นบนเซิร์ฟเวอร์ และฉันจะรวมแบบอักษรนั้นกับ CSS ลงใน HTML ได้อย่างไร เป็นไปได้ไหมถ้าไม่มีกราฟิก?

518 html  css  fonts  font-face 

ฉันกำลังดูหน้า MDC สำหรับกฎ @ font-face CSSแต่ฉันไม่ได้อะไรเลย ฉันมีไฟล์ที่แยกต่างหากสำหรับตัวหนา , ตัวเอียงและตัวหนาตัวเอียง + ฉันจะฝังทั้งสามไฟล์ใน@font-faceกฎเดียวได้อย่างไร ตัวอย่างเช่นถ้าฉันมี: @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } เบราว์เซอร์จะไม่ทราบว่าจะใช้แบบอักษรใดสำหรับตัวหนา (เพราะไฟล์นั้นคือ DejaVuSansBold.ttf) ดังนั้นจึงจะเป็นค่าเริ่มต้นสำหรับสิ่งที่ฉันอาจไม่ต้องการ ฉันจะบอกเบราว์เซอร์ที่แตกต่างกันทั้งหมดที่ฉันมีสำหรับแบบอักษรบางตัวได้อย่างไร

454 fonts  css  font-face 

ฉันกำลังทำงานบนเว็บไซต์ที่ต้องใช้การทดสอบแบบอักษรออนไลน์แบบอักษรทั้งหมดที่ฉันมีคือ. otf มีวิธีฝังแบบอักษรและทำให้พวกเขาทำงานกับเบราว์เซอร์ทั้งหมดหรือไม่ ถ้าไม่มีฉันมีทางเลือกอื่นอีกบ้าง?

440 html  css  fonts  font-face 

ฉันใช้@font-faceเว็บไซต์ของ บริษัท และใช้งานได้ / ดูดี ยกเว้น Firefox และ Chrome จะโยนข้อผิดพลาด 404 ลงใน.woffไฟล์ IE ไม่ทิ้งข้อผิดพลาด ฉันมีแบบอักษรอยู่ที่รูท แต่ฉันได้ลองกับแบบอักษรในโฟลเดอร์ css และให้ URL ทั้งหมดสำหรับแบบอักษร หากลบแบบอักษรเหล่านั้นออกจากไฟล์ css ของฉันฉันจะไม่ได้รับ 404 ดังนั้นฉันรู้ว่าไม่ใช่ข้อผิดพลาดทางไวยากรณ์ นอกจากนี้ฉันใช้เครื่องมือ fontsquirrels เพื่อสร้าง@font-faceแบบอักษรและรหัส: @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: …

422 css  http-status-code-404  font-face  woff 

ฉันได้รับการกำหนดค่าแบบอักษรบางอย่างในไฟล์ Scss ของฉันดังนี้: @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } ไฟล์ตัวอักษรที่แท้จริงจะถูกเก็บไว้ใน / app / สินทรัพย์ / แบบอักษร / ฉันเพิ่มลงconfig.assets.paths << Rails.root.join("app", "assets", "fonts")ในไฟล์ application.rb แล้ว และคอมไพล์ซอร์ส CSS มีดังต่อไปนี้: @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

ในCSS3 font-faceมีหลายประเภทหลายแบบอักษรรวมเช่นttf, eot, woff, และsvgcff ทำไมเราควรใช้ทุกประเภทเหล่านี้? หากพวกเขาพิเศษสำหรับเบราว์เซอร์ที่แตกต่างกันทำไมจำนวนของพวกเขามากกว่าจำนวนของเบราว์เซอร์ที่สำคัญ?

299 css  font-face  webfonts 

ฉันสังเกตว่าสิ่งนี้info logเริ่มปรากฏใน Google Chrome Dev (เวอร์ชัน 55.0.2883.18 dev) และฉันไม่สามารถจินตนาการได้ว่าทำไม ตรวจพบเครือข่ายช้า ฟอนต์ทางเลือกจะใช้ขณะโหลด: http: //font-path.extension ` มันจะปรากฏในทุกเว็บไซต์ที่ใช้งานfont-faceแม้ในหน้าเว็บท้องถิ่นและส่วนขยายของ Chrome

283 google-chrome  font-face 

ฉันต้องการสร้างปุ่มปิดโดยใช้ CSS เท่านั้น ฉันแน่ใจว่าฉันไม่ใช่คนแรกที่ทำสิ่งนี้ดังนั้นไม่มีใครรู้ว่าแบบอักษรใดที่มีความกว้างเท่ากับความสูง 'x' เพื่อให้สามารถใช้ cross-browser เพื่อดูเหมือนปุ่มปิดได้

219 css  fonts  font-face 

รหัสต่อไปนี้ใช้งานได้ใน 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: …

195 css  firefox  font-face  file-uri 

ฉันเคยเห็นเว็บไซต์ใหม่บางแห่งที่ใช้แบบอักษรที่กำหนดเองในเว็บไซต์ของพวกเขา (นอกเหนือจาก Arial ปกติ Tahoma และอื่น ๆ ) และรองรับเบราว์เซอร์จำนวนมาก เราจะทำอย่างนั้นได้อย่างไร? ในขณะเดียวกันก็ป้องกันไม่ให้ผู้ใช้สามารถดาวน์โหลดแบบอักษรได้ฟรีหากเป็นไปได้

175 css  font-face 

นี่คือประเภท mime SVG ปกติ: image/svg+xml และมันใช้งานได้ดี อย่างไรก็ตามเมื่อฝังแบบอักษร SVG โครเมี่ยมจะบอกคุณว่าประเภท mime นั้นไม่ถูกต้องเพราะคุณส่งคืนแบบอักษรแทนภาพ มีประเภท mime สากลหรือไม่? ผิดหรือเปล่า? เป็นที่application/svg+xmlยอมรับอย่างใด ฉันเดาว่านี่ยังคงเป็นพื้นที่สีเทาใน HTML5 แต่บางคนที่นี่อาจรู้จัก

168 html  svg  font-face  mime-types 

มีปัญหามานานแล้วที่ Firefox ไม่โหลดแบบอักษรจากแหล่งที่มาที่แตกต่างจากหน้าเว็บปัจจุบัน โดยปกติปัญหาจะเกิดขึ้นเมื่อใช้ฟอนต์บน CDN คำถามอื่น ๆ มีการแก้ปัญหาต่างๆ: CSS @ font-face ไม่ทำงานกับ Firefox แต่ทำงานกับ Chrome และ IE ด้วยการเปิดตัว Amazon S3 CORS มีวิธีแก้ไขโดยใช้ CORS เพื่อแก้ไขปัญหาการโหลดแบบอักษรใน Firefox หรือไม่ แก้ไข: จะเป็นการดีที่จะดูตัวอย่างการกำหนดค่า S3 CORS แก้ไข 2: ฉันพบวิธีแก้ปัญหาที่ใช้งานได้โดยไม่เข้าใจว่ามันทำอะไร หากใครสามารถให้คำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับการกำหนดค่าและเวทมนตร์พื้นหลังที่เกิดขึ้นจากการตีความการกำหนดค่าของ Amazon จะได้รับการชื่นชมอย่างมากเช่นเดียวกับ nzifnab ที่ให้ความสำคัญกับมัน

136 css  firefox  amazon-s3  font-face  cors 

ฉันใช้@font-faceเป็นครั้งแรกและดาวน์โหลดชุดแบบอักษรจาก fontquirrel โค้ดที่แนะนำให้ใส่ลงใน CSS ของฉันคือ: @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'), url('Junction-webfont.woff') format('woff'), url('Junction-webfont.ttf') format('truetype'), url('Junction-webfont.svg#webfontoNEpZXy2') format('svg'); } ตอนนี้สิ่งที่ใบหน้ายิ้มทำให้ฉันนิ่งงัน แต่จำนวน URL ใน src ก็เช่นกัน - ทำไมพวกเขาถึงแนะนำไฟล์จำนวนมากและทั้งหมดจะถูกส่งไปยังเบราว์เซอร์เมื่อมีการแสดงผลเพจหรือไม่? มีอันตรายใด ๆ ในการลบทั้งหมดยกเว้น. ttf?

134 css  font-face 

ฉันกำลังอยู่ในขั้นตอนการสร้างแอปพลิเคชั่นอินทราเน็ตขนาดเล็กและลองใช้แบบอักษร Adobe ที่ซื้อมาเมื่อเร็ว ๆ นี้โดยไม่มีโชค ตามที่ได้รับแจ้งในกรณีของเราไม่ใช่การละเมิดใบอนุญาต ฉันแปลงฟอนต์เวอร์ชัน. ttf / .otf เป็น. woff, .eot และ. svg เพื่อกำหนดเป้าหมายเบราว์เซอร์หลักทั้งหมด ไวยากรณ์ @ font-face ที่ฉันใช้นั้นเป็นแบบกันกระสุนจากFont Spring : @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iehack') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } ฉันแก้ไขส่วนหัว HTTP (เพิ่ม Access-Control-Allow-Origin = "*") เพื่ออนุญาตการอ้างอิงข้ามโดเมน ใน FF และ Chrome ทำงานได้อย่างสมบูรณ์ …

132 internet-explorer  css  internet-explorer-9  font-face 

ฉันต้องนำเข้าแบบอักษร Klavika และฉันได้รับในหลายรูปทรงและขนาด: Klavika-Bold-Italic.otf Klavika-Bold.otf Klavika-Light-Italic.otf Klavika-Light.otf Klavika-Medium-Italic.otf Klavika-Medium.otf Klavika-Regular-Italic.otf Klavika-Regular.otf ตอนนี้ฉันต้องการทราบว่าเป็นไปได้หรือไม่ที่จะนำเข้าใน CSS ด้วย@font-faceแบบสอบถามเดียวโดยที่ฉันกำหนดweightในแบบสอบถาม ฉันต้องการหลีกเลี่ยงการคัดลอก / วางแบบสอบถาม 8 ครั้ง สิ่งที่ชอบ: @font-face { font-family: 'Klavika'; src: url(../fonts/Klavika-Regular.otf), weight:normal; src: url(../fonts/Klavika-Bold.otf), weight:bold; }

119 css  fonts  font-face