Vicker's Coding Kitchen » CSS

Flex FAQ #8: Font Embedding 全集

Vicker — Tue, 07 Apr 2009 16:40:15 +0000

尋日要幫一個 application 做 font embedding
主要係想 embed 楷書
其實 font embedding 本身並唔係一件難事
因為 Flex 本身已經 support~
但係 embed 得黎又要控制好 file size 就唔簡單~!
至於楷書o既問題就更加多…
應該 specific d 講… 係 Microsoft o既標楷體o既問題更加多…

由淺入深~

1) Flex 直接 Embed font

方法主要有兩種

1A) Flex CSS refer local font

@font-face
{
	src: local("標楷體");
	font-family: "KaiShu";
}

o係 CSS 裡面 declare font-face
然後 source 利用 local 指住個字體名
最後 declare 一個 font family 名~ (呢個隨意就得)
呢度最 tricky 係個字體名… 特別係 Mac 機再加埋中文字…
經常攪到 Flex Builder compile o既時候會出現 local build error…

好: 快
壞: 唔穩定, File Size 大

1B) Flex CSS refer font file

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
}

想解決 1A 出現o既問題就要利用 source 指 url 直接指住 font file
font file 大家可以o係唔同地方買或者 download 到
如果o係 system font 的話

Windows 可以o係控制台 > 字型裡面抄走
Mac 可以o係 System/Library/Fonts 裡面抄走
(Mac 特別要留意副檔名 dfont 的係 embed 唔到架)

好: 穩定~ 準
壞: File Size 大

備註: Embed Microsoft Windows 內置標楷體o既爆字問題

如果大家要 embed 標楷體~ 就千祈唔好用 Windows 裡面o既標楷體
因為 embed 之後o係 Mac 機睇係會出現爆字問題

關於爆字 (字形破碎) o既問題請參考 – 破碎的細明體研究院
http://bbs.bnw.com.tw/conference/viewtopic.php?t=2856

簡單黎講o係 MS 的標楷體 version 太舊 (3.0)
解決方法係去華康科技買返新 d o既 version (latest 5.0) (我試過 2005 年o既 3.10 無問題)

不過用華康標楷體 3.10 最大o既問題係 file size…
MS (4.9Mb) 華康 (27.9Mb)
一個 Flex application 用之前要 download 4.9Mb 已經唔容易… 更何況 27.9Mb…

另外更要特別提一提
Embed 27.9Mb o既字形係好耐同好唔 stable 架
我曾經多次出現 out of memory o既問題…
10 次 compile 得 2 – 3 次成功…
(Mac Pro 都頂唔順… 好難相信… 應該又係 Flex Builder 問題…)

2) Flex 利用 unicode-range 抽出要 embed o既字

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011,U+6211;
}

其實利用 Flex CSS Embed font o既時候係可以透過 unicode-range 抽出某 d 字架
以上面為例就會將 “們” 字同 “我” 字抽出黎啦~!
究竟點解係 5011 同 6211 呢?

其實 5011 同 6211 係 d 字o既 unicode value in HEX
想 get 一個中文字o既 unicode
大家可以用呢個 Chinese to Unicode converter
http://www.chinese-tools.com/tools/converter-unicode.html
記住要將個 result 轉返做 HEX value

如果大家用 Mac o既 Numbers 的話可以用下面呢個 equation

=CONCATENATE("U+",RIGHT(DEC2HEX(CODE("字")),4))

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011-U+6211;
}

至於呢個係另一種寫法~ 將 5011 至 6211 所有字都 embed~
當然大家可以 combine comma “,” 同 dash “-” 兩種寫法啦~!!

好: 要用o既字先 embed~ 有效控制 file size
壞: 煩… 要逐粒字加都幾浪費時間…
更壞: Flex Builder 應該有 bug… 當 unicode-range 後面太多野會出現 compilation error…

3) Flash + Flex Combo = 無敵~!

試左一整日… 放棄左一輪之後… 突然諗到o既絕技~!
Flash + Flex Combo

首先利用 Flash dynamic text field 寫低需要o既字

記住要揀埋你需要o既 font
跟住 set dynamic text field o既 font embedding

然後揀 Auto Fill~
一下就掂晒~!

然後 Export SWF file~
最後 Flex embed SWF file

@font-face
{
	src: url("/fonts/font.swf");
	font-family: "DFBiaoKaiShu-B5";
}

留意 font family 一欄今次唔可以隨便填
一定要同 Flash 裡面寫o既完全一樣
以我上面 example 為例就係 DFBiaoKaiShu-B5

之後就可以 compile 啦~!

好: 快準穩定
壞: 要開多一個 application… =.=

Sometimes I hate Flex… Sometimes

Vicker — Thu, 24 Jul 2008 19:15:22 +0000

Don’t get it wrong… I am not leaving Flex, most of my current developments still rely on it and I am sure it will last for several more years.

Working with Flex for nearly two years. I am sure I have the right choice however sometimes Flex do makes me mad.

SWFLoader content can’t be unloaded completely.
(How many times you try to replace a loader content but you notice the content music never gone away)
VideoDisplay component doesn’t play .flv correctly…
Not even those produced by Flash Video Encoder…
Non standard CSS
Math.floor (Math.random () * 4) + 6
(Oh my god… I just want a random integer)
Smooth scroll List
Disabling Ctrl key during drag move
Gradient fill Container
Full screen Keyboard input…
(I understand security… but that should be user’s responsibility… not developer’s obstacle)

Flex Builder related…

Why can’t I export my syntax coloring settings?
I don’t know which part I haven’t done yet… WHERE’S MY TODO!?!?
Auto building get set function please…

To be continue…

Adobe… please… I love advancedDataGrid… but fix the old ones first…

Alternate Style Sheets

Vicker — Wed, 30 Nov 2005 16:42:22 +0000

When we designing our web site style, have we think about whether others like our style? I guess it is not possible making a style which suits everyone’s taste. So why not letting the visitor selecting his own style? That is why Alternate Style Sheets become an important function in a web site.

The idea of alternate style sheet is that we will first prepare a few different style sheets to be the alternate. And then providing a drop down box within the web page allowing the user to choose the style he / she likes. And the preferences are stored in the cookies, so the next time he / she returns will be browsing in his / her favorites.

This method is not simply talking about suiting someone’s taste. It is also raising the accessibility of the web sites which is suggested by W3C. Because we can design styles which have larger fonts for the elderly, or design styles which have simpler color combinations for the people suffering color blindness.

Although it increases the workload designing the styles, it worths.

Reference:

Alternative Style: Working With Alternate Style Sheets. [Online]. Sowden, P. Available: http://www.alistapart.com/stories/alternate

Aural Cascading Style Sheets (ACSS)

Vicker — Wed, 23 Nov 2005 01:22:14 +0000

Cascading Style Sheets (CSS) is widely used when developing a web page. It can be used in both layout and styling. However it is meaningless for the blinds. So are there any styles for the blinds?

Aural Cascading Style Sheets (ACSS) is the answer. Actually ACSS is not a new technology. It can be viewed as an add-on to the original CSS. The following are the commands supported by ACSS.

voice-family
speech-rate
pitch
pitch-range
stress
richness

By means of these commands, the speech produced by the disables assisting browsers like JAWS that I previously mentioned can be “styled”.

For example the following will make the browser reading the text in a woman high pitch voice.

Phantom of the Opera. Arrrrrrrrrrrrrrr~~~~

References:

ACSS: Aural Style Sheets. [Online]. Burns, J. Available: http://www.htmlgoodies.com/beyond/css/article.php/3470211

The Form Assembly

Vicker — Tue, 27 Sep 2005 23:48:34 +0000

HTML Form, I guess anybody who written some web pages before should be familiar. It is not a really hard one actually. With some form elements like input, select, options, etc… the form already works. However is it usable and accessible? Have you done enough form validation? Have you provide enough labels for the form elements?

Building a good HTML form is not a easy task, especially if you want to follow those standards. Googling for a while, found out this web which is great to achieve the mentioned points above. The Form Assembly (http://www.formassembly.com)

Same as other informational web sites, there are articles and tutorials on building the web forms. But my focus are on the three links on the left hand side of the web.

Form Builder

A web tool which will help you to build your form in a standard format. What you have to do is just filling your requirements and thats it.

Form Library

Here you can access a large number of templates with different stlye and even different language.

Form Garden

Personally I suggest this to everyone, which is a CSS form builder. You can select the styles available on the right and test it in the center. After your selection, you can simply download the CSS and use it in your own web page.

It is so convenient with all these handy tools and the most important thing is that we can learn from their source and design :p

Web Content Accessibility Guidelines

Vicker — Tue, 13 Sep 2005 22:54:31 +0000

Before having the first lecture there are already quite a large number of things that can be explored simply browsing Andy’s web.

You may notice that there are a number of small icons on the bottom of Andy’s course web. Saying W3C XHTML, W3C CSS, W3C WCAG, BOBBY 508 and BOBBY AAA.

For the first two, I guess is quite familiar to many people. They are the standards posted by W3C. (World Wide Web Consortium) Using the validators provided by them, (HTML validator and CSS validator) anyone can check whether their web page fullfill the requirements of the standards. If it is a success, they can place this icon on their web.

But how about WCAG, 508 and Bobby??

Due to my curiosity, I have made some search on W3C. Actually WCAG stands for Web Content Accessibility Guidelines. It is a guideline which will make a website more accessible. (WCAG 1.0) Section 508 is something similar to WCAG but written in US Federal law.WCAG have a total of 3 accessibility compliance, A, AA and AAA. (where AAA is the best and of course the hardest to achieve) Although W3C do not provide any automated WCAG checker, we can still check it through WebXACT. (WebXACT) I guess the former name is Bobby but now changed. However even WebXACT can not do all the testing inside the guideline, because some of them are not coding related, e.g. color matching.

Although it is hard to acheive all these standards, I think as a web designer we should try our best to do at least most of these. This improves not only the speed of loading the page but also helping our visitors to browse.