I thought that might have been the case, but alas, I've already embedded the fonts Admittedly, before I embedded them, the project on the web displayed Times New Roman instead of Topaz Inline, so at least that problem is fixed. But the issue here, I believe, is anti-aliasing (although I could be very wrong). That may be why text implemented with Flash Pro displays correctly on the web while text implemented with Catalyst doesn't. Then again, maybe it has something to do with the different ways they render fonts? I'm not sure.
Hum, the only other thing I can think of is the font's format (TrueType/OpenType/PostScript 1).
I'm having the same issue. Design looks great in "Preview" mode, when Catalyst is using the fonts installed on the system. Once "Published" with embedded fonts, the colors get lighter by several shades, and the text gets chewed up. Obviously there's some problem with the way the fonts are embedding. The effect is the same once the project is imported into Flash Builder 4.
I've tried several experiments, so far without luck. One which has been suggested, but I haven't had time to try yet, is to embed the fonts via a swf file, as described here: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_09.html
There's also a potential issue if you're using a mixture of mx (<mx) and spark (<s:) components, which you'll be able to see if you switch your Catalyst workspace over to Code view. That issue, and a great deal more information on how Flex (Catalyst) handles font embedding can be found here:
...but I still haven't come up with a solution yet...
I can explain the difference between design view and runtime fonts, but it'll take a few sentences. Bear with me =).
The Flash Player has two ways of rendering fonts:
1) device rendering: this is where the player defers to the operating system to turn the text into pixels.
2) embedded rendering: this is where the player uses its own built-in font renderer to turn the text into pixels.
Embedded rendering is cool because it allows the end-user to see fonts that they do not have installed on their machine. Font embedding is the reason that you can use any fonts in Flash content, but you can't do that in HTML (HTML5 font-face notwithstanding (http://lmgtfy.com/?q=html5+font-face)).
However, embedded fonts do not look the same as device fonts, because every version of every operating system has a slightly different font renderer, whereas the Flash Player has one font renderer it uses on every operating system.
Now the answer to your question: design view always uses device rendering, but any non-standard fonts you publish in an FC document uses embedded rendering. Thus the rendering difference.
Why does DV use device rendering? Well, because any font that you are using in your design is, by definition, on your machine, so there's no need to embed the fonts. Furthermore, design view is a single static SWF file, compiled once. For obvious reasons, we couldn't embed every possible font that you might use within that SWF file.
Now, you're still left with the problem of "how do I make this look good". That's where my knowledge falls short. I would try playing with the font embedding options (http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f5f.html#WS2d b454920e96a9e51e63e3d11c0bf69084-7e0d). Unfortunately, you can't do this directly in Flash Catalyst - you'll have to do it in Flash Builder. I'll also ask around here to see if anyone can give you more advice.
Oops, I forgot one thing: the reason you're not having this problem in Flash Pro is probably that you are NOT embedding the font in Flash Pro. That means the runtime SWF uses the device renderer, which looks good. However, the font will be totally incorrect when viewing the SWF on any machine that doesn't have that font installed.
I've seen this as well with fonts that have very fine stroke weights. The top section of the attached screen capture shows 24 pt Interstate Hairline, embedded and rendered by the Player. While the lower section is using the device font on my workstation.
Unfortunately, the only suggestion I have beyond experimentation with font embedding and anti-aliasing options in Flash Builder is to use a font with a slightly heavier stroke weight.
Thanks so much for that response. Knowing that Flash Catalyst uses
device rendering for Preview answers many of my questions, and jives
with my experience. Also now understanding that embedded rendering
looks different, and is supposed to look different answers the rest.
As far as making it look good, that will be easier with this new
understanding in mind. It may also be possible to play with some of
the anti-aliasing options in Flash Builder to tweak the embedded
rendering (i.e. font-sharpness, font-thickness tags in the Main.css
file of the imported .fxp from Catalyst)?
Feature request for a future version of Flash Catalyst: Local Preview
(like the current "Run Project," using device rendering) and Deploy
Preview, which would run an embedded build, similar to how Flash
Builder does it?
That would make designing a little easier, as the designer could
target the appropriate look during the process, instead of after
"Publishing." Although, I suppose one could do the same by
continually publishing, and checking the result in various browsers.
Agreed. Thanks, Eric.
Can you post a SWF with this problem, so we can take a look?
Here's a quick test showing different weights of "Gotham" at 9, 11, and 14 pt.
Also screen shots of how it looks running locally, with device rendering (on left),
and from the published "deploy" folder, with embedded rendering (on right).
Both versions running in Safari 5.0.3, Mac OSX 10.6.5
I think you forgot the images
I sent them as attachments in an email reply -- guess you can only post files in the forum from the actual forum?
I'll try again:
Gotham Light and Book comparison:
Gotham Medium and Bold comparison:
...And the actual SWF...