English 中文(简体)
Custom font and a CMS
原标题:

I m building a web site for an artist who has had a custom font made from his handwriting. He d like to use this font extensively throughout the site - not for all body copy because it d be difficult to read, but for headings, navigation, callouts, things like that.

I ve got the file - it s a TrueType font file.

We re going to be using a PHP-based CMS to build the site.

What is the best way to go about using this custom font for this purpose while still allowing page name, titles, etc. to be edited by the client in the CMS? I d like to accommodate as many users as possible, but it would be fine if some site visitors saw Arial or Verdana or whatever we choose for the body copy.

Should I give @font-face a whirl? Use PHP to create images on the server? Sifr? This site will likely be around for awhile, so I d like to be as forward-thinking as possible. At the same time, I d like to be really sure nobody can use the font on their own web sites or download a copy.

Some background info on his current existing site: Reasonably busy site with about 500 visits (2000 page views) per day.

Browser stats:

IE: 48% (10% of IE users on IE6, 42% on IE7, 48% on IE8)

FF: 32% (38% of those on 3.5.5, 29% on 3.0.15, 11% on 3.5.4, 4% on 2.0.0.20, and 5% on 3.5.2)

Safari: 17% (53% of those on 531.9, 13% on 531.21.10, 7% on 528.16, 5% on 525.22 and 4% on 530.19)

Chrome: 2% (41% of those on 3.0.195.33, 31% on 3.0.195.27, 21% on 3.0.195.32 and 4% on 4.0.223.16)

最佳回答

The easiest solution is to use the @font-face method. If you include the Microsoft only format(.EOT) it will work in ANY browser.

Check out some of these articles on font replacement.

http://www.zeldman.com/2009/12/02/bulletproof-font-face/ http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/ http://www.jonnyhaynes.com/2009/10/font-face-the-time-is-now/

You can use this tool from Microsoft to convert your font to a .EOT(The format need for IE)

http://www.microsoft.com/typography/WEFT.mspx

The @font-face method doesn t require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.

It s totally SEO friendly and scalable.

问题回答

I would try cufon. The typeface would not be "protected." But it would require quite a bit of technical effort to convert the Cufon generated typeface back to a Truetype or Opentype face.

The method I would recommend is scalable inman flash replacement (sIFR), which you can find information on here: http://www.mikeindustries.com/blog/sifr/

The other technique that is common, but I have never used personally, is php Image replacement. Both require use of scripts, so they won t work with people who use noscript and I know sIFR won t work with Ad Block Plus, but like you said, a large percentage of your market it will work just fine and looks fantastic.

Two options (aside from SIFR and Cufon as others have noted):

Specify a custom font via CSS:

http://www.456bereastreet.com/archive/200710/the_resurrection_of_downloadable_web_fonts/

http://www.richinstyle.com/guides/fontface2.html#src

Create static images:

As you have noted create images for each header using the custom font - this would also present a hurdle to anyone who wants to copy the font. (Of course, they could always trace a font from the graphics containing the font and easily create a TTF from it).

The main strike against is this question is the following:

"I d like to be really sure nobody can use the font on their own web sites or download a copy"

Really? Without using static images/flash/SIFR/Cufon, a user will need to download a copy of a font to their computer in order to render the font in their web browser. Once you give a copy to the user you can t really expect to control whether they use it on their own web site. Again, it s trivial to copy a font from a static image and create a TTF for the whole world to copy - see sites like http://www.dafont.com/ for examples of famous fonts copied (as an example, the Tranformers font: http://www.dafont.com/search.php?psize=m&q=transformers)

@Font-Face works great for me. There is a generator here where you can upload your font, and then it will provide you with all the formats & code you ll need: http://www.fontsquirrel.com/fontface/generator





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

CSS specific for Safari

How do you target specifically safari in css with styles?

Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

热门标签