font-face

问题 Recently I enabled Amazon S3 + CloudFront to serve as CDN for my rails application. In order to use font assets and display them in Firefox or IE, I have to enable CORS on my S3 bucket. <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*<

问题 Recently I enabled Amazon S3 + CloudFront to serve as CDN for my rails application. In order to use font assets and display them in Firefox or IE, I have to enable CORS on my S3 bucket. <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*<

问题 I've created a @font-face css rule and all the font formats using Font Squirrel and works fine on all browsers I have tested so far, but not on IE7. The font seems to not be loaded at all. You can see the site live at http://grupogamma.socialsnack.com/ The @font-face rules are on http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css and fonts are on http://grupogamma.socialsnack.com/fonts/ My css snippet as generated by Font Squirrel: @font-face { font-family:

问题 I have stored the default font type and size of my application in a CSS file which I apply using the code: label.getStyleClass().add("labelStyleClass"); However I also added the feature that if the user provides its own preference, it should override the default settings (set above) and use the user provided font size: double userSize = readFromFile; label.setFont(new Font(userSize)); In this case the label.setFont() call does not set the new size given by user. When I comment out the initial

问题 I'm able to embed and style a font-face in a webpage to view on Android and iPhone, and it works fine. However, it will not render on Windows Phone 7.5. I've tried embedding the font into the CSS: @font-face { font-family:'MyFont'; src: url(data:font/woff;charset=utf-8;base64,d09GR... } ...and also provided eot / ttf files, using a declaration that works across all other browsers - @font-face {font-family:'MyFont';src:url('../fonts/MyFont-webfont.eot');src:url('../fonts/MyFont-webfont.eot?

问题 Is it possible to define a custom name for Google fonts? Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> How to use 'Open Sans' with custom name? div { font-family: 'custom'; // to be same as 'Open Sans' } Using @font-face as answered here is not possible, since I don't have url to source files (ttf, eot, woff, ...). Links to source files on Google cdn would solve this issue. 回答1: This code will work in your case: <style type="text/css">

问题 CSS has a @font-face rule which allows us to "use" custom fonts. Does JavaScript have this functionality? More specifically, is it possible to "use" custom fonts without using the CSS @font-face rule? 回答1: There is no way to cause the browser to load a font from the network other than with a @font-face rule. You could theoretically create that @font-face rule from JavaScript without having to use document.write (or document.createElement("style") etc), if instead you used the CSS Object Model

问题 CSS has a @font-face rule which allows us to "use" custom fonts. Does JavaScript have this functionality? More specifically, is it possible to "use" custom fonts without using the CSS @font-face rule? 回答1: There is no way to cause the browser to load a font from the network other than with a @font-face rule. You could theoretically create that @font-face rule from JavaScript without having to use document.write (or document.createElement("style") etc), if instead you used the CSS Object Model

问题 Has anyone come across something like this exclusively in Chrome 10/Win? All the non-breaking spaces in these two webfonts aren't rendered properly. Working in IE7/8/9, Firefox, Safari, and Chrome/OSX. Contents of my fonts.css file: @font-face { font-family: 'Hellenic'; src: url('../fonts/eot/hellenic.eot?') format('eot'), url('../fonts/ttf/hellenic.ttf') format('truetype'), url('../fonts/woff/hellenic.woff') format('woff'), url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg'); }

问题 Has anyone come across something like this exclusively in Chrome 10/Win? All the non-breaking spaces in these two webfonts aren't rendered properly. Working in IE7/8/9, Firefox, Safari, and Chrome/OSX. Contents of my fonts.css file: @font-face { font-family: 'Hellenic'; src: url('../fonts/eot/hellenic.eot?') format('eot'), url('../fonts/ttf/hellenic.ttf') format('truetype'), url('../fonts/woff/hellenic.woff') format('woff'), url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg'); }