typography | 易学教程

Portable web font technology

阅读更多关于 Portable web font technology

问题 After reading the question on web font typeface selection, it occurred to me that portable network fonts were the answer. We used to use a package by Bitstream to generate subsets of needed fonts to embed in web pages so that it looked the same in every browser on every platform. When I Googled this, I found an RFC that looks like it's owned by Bitstream, and not much else. What happened to this technology? Am I just not seeing it? Or did it disappear because it was proprietary? If so, what's

CSS text-underline rendering difference between FF/IE and Chrome

阅读更多关于 CSS text-underline rendering difference between FF/IE and Chrome

I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline. http://nostalgia.mx/light2.html Open the site with both firefox+ie and chrome and you'll notice the profound differences: 1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional. 2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.

@font-face doesn't work in Firefox (but exact same code works on another site)

阅读更多关于 @font-face doesn't work in Firefox (but exact same code works on another site)

问题 I have two sites using the same exact code for @font-face. The font files are hosted on the respective sites and the paths are correct. One works, one doesn't. (And of course it works on my personal site and not the clients!) I'd really appreciate some fresh perspective on this! Where it WORKS: The site: http://example.com/ The CSS file: http://365.example.com/index.php?css=photos/style.v.1275845154 The relevant code: @font-face { font-family: 'JournalRegular'; src: url('./themes/fonts

Certain parts of typography (letters) respond to width / height of window?

阅读更多关于 Certain parts of typography (letters) respond to width / height of window?

I'm not sure if something like this is possible through CSS, but then again the talented folks in this community have proven me wrong numerous of times so here we go! I was wondering if it is possible for certain horizontal parts of the letters O , U , and E can respond with with the window's width while maintaining its position? On the image below, I have drawn out how the responsive typography reacts to the window scale. Please note that the set type are placed within a page-wrap and placed vertically in the middle of the window. How might I accomplish this? And should what format should I

Using @fontface, how do I apply different styles to different font-families?

阅读更多关于 Using @fontface, how do I apply different styles to different font-families?

I'm having trouble with some CSS. Currently I'm using @fontface which works fine and dandy. However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently. For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman. Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed. Is this even possible? And if so, please assist with some code. h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }

Is Garamond really a web safe font?

阅读更多关于 Is Garamond really a web safe font?

问题 Is Garamond really web safe? Should I go ahead and use it? I know its not there in XP(Georgia is the fallback), however, what about other operating systems? Is it present in macs, new windows and linux? I know I could simple do a @font-face, however, the if I embed it, it looks pretty hideous in Google Chrome. EDIT Okay, what if I do @import url(http://fonts.googleapis.com/css?family=EB+Garamond); html{font-family: Garamond, EB Garamond, Georgia, serif;} Will, this way the web browser will

IE9 text rendering issue - tails on letters cut off

阅读更多关于 IE9 text rendering issue - tails on letters cut off

I'm running into an issue where - in IE9 standards mode - IE9 renders text in such a way that the tails on descending letters - "q, p, y" etc - disappear. Have tried playing with padding and other common CSS settings in helps of fixing this but am having no luck so far. Who's got an idea what this might be? EDIT: I found this on a blog. The link isn't live anymore. Leaving it here just in case it pops up again. Its as though the text is a node inside the input and the line-height has been set on that inner element, with the surrounding element clipping the overflowing text. The solution is

Multi-line text-overflow:ellipsis in CSS or JS, with img tags

阅读更多关于 Multi-line text-overflow:ellipsis in CSS or JS, with img tags

问题 I tried using : text-overflow ellipsis feature in CSS3 (but doesn't support multi-line) several jquery plugins like dotdotdot (http://dotdotdot.frebsite.nl/) jquery autoellipsis (http://pvdspek.github.com/jquery.autoellipsis/). All of these tools work quite well but if content has images the calculated height for truncation with dotdotdot or jquery.autoellipsis is wrong. I was just wondering if someone has a great idea for dealing with this (maybe some server-side processing on ?), Thanks by

CSS - Display text at descent instead of baseline?

阅读更多关于 CSS - Display text at descent instead of baseline?

问题 Is there a proper way to display text at the descent height of a line instead of its baseline? Please reference the following pages: http://en.wikipedia.org/wiki/Baseline_(typography) and http://jsfiddle.net/YPPnU/ The goal is to have the bottom of my text (as pictured in the fiddle) flush with the bottom of the H1 block without using images. I realize that it is flush if I use descending characters(p, q, etc) however, I will never be using them for the scope of this project. I need

Web font embedding vs. sifr?

阅读更多关于 Web font embedding vs. sifr?

问题 I'd like to use a non-standard web font to improve the appearance of my HTML. Is it preferable to embed a web font or use something like sifr? My understanding is sifr is a flash-based viewer for vector fonts but I've been reluctant to try it because it seems somewhat complicated. There does not seem to be a lot of encouraging talk about web font embedding (because of legal issues) so maybe sifr is more of a standard way to do this? Any feedback would be appreciated. Thanks. 回答1: Web fonts