font-face

问题 The challenge: Provide dynamic web fonts that render acceptably across all major browsers, devices and Operating Systems The story: So I had used cufon or sifr in the past and had since abandoned both in favor of @font-face. After using @font-face in production for some time, I made a horrifying discovery. Many fonts (most?) look like crap in Windows XP, regardless of browser. Even in google chrome, XP renders the fonts unacceptably jagged and ugly. I am aware of why this is happening. After

问题 I've been having a lot of difficulties with using custom fonts and @font-face . I'm trying to get a font consistent across the latest versions of Chrome, Safari & Firefox (shown in that order in the screenshot below: I'm using the following to generate this: @font-face { font-family: 'dineng'; src: url('fonts/dineng.eot'); src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'), url('fonts/dineng.woff') format('woff'), url('fonts/dineng.ttf') format('truetype'), url('fonts/dineng.svg

问题 I have website: http://kuvaklubi.fi where I'm trying to use font "Century Gothic" . This font is not present on my computer in "Installed fonts" , and I'd like to embed this font in css via @font-face . I have generated some font files and css at http://www.fontsquirrel.com/ however I'm still having problems. I can't see "Century Gothic" font in IE9, FF4 browsers . CSS: @font-face { font-family: 'CenturyGothicRegular'; src: url('gothic-webfont.eot'); src: url('gothic-webfont.eot?#iefix')

问题 I want to use a pixel font on the web. I'm including it using @font-face however all the browsers are applying anti-aliasing to the font. I can't seem to find a CSS rule to disable this, can anyone think of another method of disabling anti-aliasing? 回答1: Font rendering is done by the operating system and browser, so, as of yet, I believe there is little that you can do with CSS. There may be some proposed CSS rules in discussion (I've seen mention "font-smooth" or something like that), but

问题 I'm using the FontAwesome font on an OSS app I'm running and I can't seem to get past Firefox's font sanitizer. The files are all served out the same domain, the paths are correct, and I'm using the official css from FontAwesome which works in Firefox when served via their site and the local docs. So I must be missing something simple. live url: https://bmark.us [11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src

问题 I'm using the FontAwesome font on an OSS app I'm running and I can't seem to get past Firefox's font sanitizer. The files are all served out the same domain, the paths are correct, and I'm using the official css from FontAwesome which works in Firefox when served via their site and the local docs. So I must be missing something simple. live url: https://bmark.us [11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src

问题 I have some content on a web page that uses funny fonts to display correctly by using @font-face to use some custom fonts. I include a warning that it might not display correctly on all browsers. The content isn't really essential to the page, so what I'd really like to do instead is simply not show it if the browser isn't going to do it, due to browser version, script blocking, or whatever. Is there a way to do that? 回答1: Modernizr has this built-in. Here's a link to a build that just checks

问题 I have checked out this thread: Google Fonts and TinyMCE and have in fact previously even successfully added new fonts to the TinyMCE font options for users. But I'm not sure what's gone wrong here and why I'm not able to do it any more. I'm trying to add a new font, Samman , which I just got from MyFonts.com. In my TinyMCE initialization, I include this: content_css : "css/fonts.css,css/userdesigntool.css,http://fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css

问题 Getting a weird behaviour for FontAwesome icon font. Icons do show up on a page load, but when I'm flipping between the tabs and going back to the original page, icons might appear as white squares (not every icon, just some). When hovering mouse over them, they are back to normal display. I'm loading the font via CDN: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> I guess white squares are from FontAwesome CSS, the browser having troubles to

问题 If you look at the footer on this page here in Safari, then look at the same footer on any other page, you'll see a difference in font rendering. It looks the the font smoothing is being applied twice to me. If I turn off the Google map, then the font rendering returns to normal, so I'm confident the map is at the root of the problem. I am applying a transparent font shadow to all text to fix some @font-face rendering issues (artefacts mainly), but this problem is present with or without text