Nhúng font vào trang Web
Không có gì chắc chắn là trang Web của chúng ta sẽ có diện mạo đúng như thiết kế khi nó hiển thị trên màn hình của độc giả. Tất cả còn tùy thuộc vào trình duyệt và sự hỗ trợ font trên máy người đọc. Nếu không tính đến các thể hiện có dùng ngôn ngữ Javascript hay bscript, người ta quan tâm đến việc các font chữ dùng trong trang Web có được cài sẵn trên máy khách hay không. Tác giả trang Web phải chọn lựa hoặc là chỉ dùng các font chữ đi kèm với hệ điều hành, hoặc là chấp nhận trang Web sẽ được thể hiện khác nhau trên từng máy.
Do có nhiều bộ mã tiếng Việt khác nhau, việc lựa chọn font chữ cho trang Web sao cho đa số người đọc đều xem được tiếng Việt là yêu cầu hàng đầu, kế tiếp là trang Web phải thể hiện được chính xác như thiết kế. Hiện nay các trang Web tiếng Việt hoặc dùng bộ font mã VNI (VNI-Times), TCVN (.vnTime) hoặc bộ font được tạo riêng (như Phương Nam). Thông thường, trên các trang này đều có lựa chọn để người đọc tải font về cài đặt trên máy mình.
Trước những yêu cầu thực tế đó, kỹ thuật nhúng font vào trang Web sao cho người không có sẵn font vẫn đọc được đang là kỹ thuật được cả Internet Explorer và Netscape phát triển.
Trong bài này chúng tôi trình bày về kỹ thuật nhúng font (Embedded Font Technology) được hỗ trợ bởi IE 4.x trở đi.
Kỹ thuật nhúng font vào trang Web
Hiện nay chưa có tiêu chuẩn công nghiệp cho kỹ thuật nhúng font. Kỹ thuật nhúng font của Microsoft chỉ được hỗ trợ bởi Internet Explorer 4.0 trở đi.
Kỹ thuật nhúng font của Microsoft dùng CSS (Cascading Style Sheet) để chỉ định kiểu font cho trang Web. Trình duyệt Internet Explorer sẽ tạm thời cài đặt font chữ vào hệ thống của người đọc để bảo đảm trang Web được hiển thị chính xác như khi thiết kế. Các font chữ có thể không được tải về máy của độc giả nếu chúng đã được cài sẵn ở đó. Thí dụ sau đây cho thấy cách chỉ định bằng ngôn ngữ CSS:
<style TYPE= "text/css">
<!?
@font-face {
font-family: VNI-Times;
font-style: normal;
font-weight: normal;
src: url(vniTimen.eot);
}
?>
</style>
Các mức độ nhúng font
Trong mã font True Type đã ghi sẵn về việc có được phép dùng các công cụ chuyển đổi nó ra dạng font để nhúng hay không. Có 4 mức độ cho phép:
* No-embedding: được chỉ định trong một bộ phận nhỏ các font hiện có. Tác giả của các font này không cho phép nhúng. Một số cho phép nâng cấp lên các phiên bản nhúng được.
Các font Bách Khoa 1 byte và 2 byte thuộc loại này (bản được Lê Hoàn sửa chữa bằng Fontographer).
* Print and preview: font có thể được nhúng, nhưng chỉ trong các trang tĩnh. Nếu việc tương tác với người dùng có thể dẫn đến sự thay đổi font trên trang, thì phải dùng font "editable" hay "installable". Tất cả font VNI đều thuộc dạng này.
* Editable: font có thể được nhúng bằng cách dùng các công cụ như WEFT (Web Embedding Fonts Tool) mà không chịu những hạn chế như các font "print and preview".
* Installable: được xem như font "editable" trong trình duyệt Internet Explorer 4.0. Font "Installable" sẽ không được cài đặt trong thư mục font của máy khách.
Nguyên nhân chính của việc đề ra nguyên tắc này là trong quá trình người dùng lướt trên Web, thư mục font của họ có thể nhanh chóng chứa đầy hàng trăm font mà họ không muốn hay không cần.
Các font ABC (1 byte) thuộc dạng này.
Tạo font để nhúng vào trang Web bằng công cụ Microsoft WEFT
Có một số công cụ để tạo font nhúng vào trang Web, như Hexmac Typograph 2.0 hoặc Webfont Maker để tạo các file *.PFR dùng cho cả IE lẫn Netscape, Microsoft WEFT để tạo font đối tượng *.eot chỉ dùng cho IE 4.x trở lên. Tuy nhiên, chỉ có Microsoft WEFT là miễn phí.
Thí dụ sau đây minh họa cách sử dụng công cụ Microsoft WEFT để tạo font eot. Có thể tải phiên bản mới nhất của công cụ này từ Web site Microsoft Typography
(http://www.microsoft.com/opentype/We...2/default.htm).
Trong bài này chúng tôi dùng WEFT phiên bản 2.0.
Các đối tượng font được tạo bởi WEFT không giống với font truyền thống ở một số điểm: Chúng là một tập con chỉ gồm các mẫu ký tự có xuất hiện trên một site hay một trang đặc biệt; Chúng ở dạng nén và chỉ được cài đặt bởi Internet Explorer 4.x sao cho các ứng dụng khác không thể truy cập; Chúng cũng không thể liên kết bởi các site không được phép sử dụng chúng.
Để chuẩn bị cho thí dụ tạo font bằng WEFT, hãy tạo một thư mục TEST trên ổ đĩa C và tạo trang Web có các dòng sau đây. Lưu file vào thư mục C:\TEST với tên là fonts.htm.
<html>
<head>
<title>test page</title>
</head>
<body>
<font face=VNI-Times size=2>
<p><b>VNI-Times</b>
VNI 2 byte [á à ả ã ạ]
</font>
<font face=.vnTime size=2>
<p><b>.vnTime</b>
Tiêu chuẩn Việt Nam 3 [áàảãạ]
</font>
<font face=vnTimes size=2>
<p><b>vnTimes</b>
Bách Khoa HCM 1 byte [áàảãạ]
</font>
</body>
</html>
Các dòng chữ Việt sau khi khai báo font được gõ theo bảng mã tương ứng với font. Trên máy có cài đủ font, IE hiển thị như sau:
Khởi động WEFT.
Nếu đây là lần khởi động đầu tiên, WEFT sẽ yêu cầu nhập tên và địa chỉ email. Tên và địa chỉ này dùng để chú thích trong phần style đầu trang Web về tác giả của font đối tượng sẽ được tạo.
Microsoft WEFT hướng dẫn chúng ta tạo font eot tuần tự qua các bước:
1. Chọn trang Web.
2. Phân tích trang.
3. Chọn font và bộ ký tự.
4. Tạo font.
Mở đề án mới bằng lệnh:
File.New
1. Hộp thoại Add Web Pages hiện ra. Qua hộp thoại này, chúng ta có thể chọn danh sách các trang Web cần được nhúng font, các trang này có thể đặt ở đĩa cứng hay trên một Web site nào đó.
File trên đĩa cứng có địa chỉ bắt đầu là file://
File trên Web site có địa chỉ bắt đầu là http://, https:// hay ftp://.
Chú ý là chỉ dùng hai dấu "/" thay vì ba dấu.
Có thể gõ địa chỉ trang Web trực tiếp vào text box hay bấm nút "..." (đánh dấu trên hình bằng 1) để chọn.
Sau đó bấm nút "Add" (đánh dấu trên hình bằng 2) để đưa vào danh sách chọn.
Nếu không đánh dấu chọn ở 3 "Do not add linked pages" thì các trang liên kết bằng href với trang đang chọn đều được tự động đưa vào.
Nút Exclude dùng để bỏ chọn một trang trong danh sách đã chọn.
Trong thí dụ này, gõ file://C:\test\ và bấm nút "Add". Bấm "Next".
2. Hộp thoại Analyze Web Pages hiện ra.
Bấm "Analyze pages!"
để MS WEFT phân tích số ký tự trên mỗi font được dùng trong các trang Web. MS WEFT tạo font nhúng chỉ gồm các mẫu ký tự xuất hiện trên trang Web, tính riêng cho các kiểu thường, đậm hay nghiêng. Thời gian phân tích có thể rất lâu tùy theo tốc độ CPU, số trang Web và độ dài các trang.
Bấm "Next".
3. Hộp thoại Fonts to Embed hiện ra. Đây là hộp thoại quan trọng nhất trong quá trình tạo font.
Danh sách các font có dùng trong trang Web được liệt kê ở đây. Ơở cột Info còn chỉ rõ mức độ cho phép nhúng font của từng tên font. Qua thí dụ này, ta nhận thấy font ABC (đánh dấu trên hình bằng 1) thuộc loại "Installable", font VNI (2) thuộc loại "Previewable" và font Bách Khoa HCM (3) thuộc loại "No Embedding". Như vậy về nguyên tắc, không thể dùng font Bách Khoa để tạo font nhúng vào trang Web.
Ta có thể loại bỏ font ra khỏi danh sách khảo sát bằng cách chọn nó và bấm nút "Donõt embed". Bấm "Add" để chọn thêm font vào danh sách khảo sát cho dù font không được dùng trong các trang Web.
Có thể thêm bớt mẫu ký tự trong font eot bằng cách chọn tên font và bấm "Subset ...". Khi đó một bảng các mẫu ký tự đã được WEFT chọn hiện ra trong cửa sổ "Used characters" 1 và dưới dạng chuỗi ký tự trong text box "Current subset" 2. Có ba cách để thay đổi số ký tự trong bộ font:
* Nhấp chuột lên mẫu ký tự trong cửa sổ "Used characters" 1 để chọn (ký tự được chọn có màu đen) hay loại bỏ nó (có màu xám).
* Gõ thêm, xóa, cắt và dán trong text box "Current subset" 2.
* Nạp một file text dạng ASCII hay Unicode để chỉ định tập ký tự cho bộ font bằng nút "Load ..." 3.
Nếu ta loại bỏ một mẫu ký tự có dùng trên trang Web thì sẽ xuất hiện ô vuông (tại vị trí các ký tự đó). Nếu ta chọn thêm một mẫu ký tự không được dùng trên trang Web, file font eot sẽ có kích thước lớn ra một cách vô ích. Chú ý là file eot càng lớn, việc tải font về máy người dùng càng chậm. Mặt khác, các font tiếng Việt 2 byte luôn cho font eot có kích thước nhỏ hơn font 1 byte vì sử dụng ít ký tự hơn. Bù lại, trang Web dùng font tiếng Việt 1 byte sẽ có kích thước nhỏ hơn trang tương tự dùng font 2 byte.
Hộp danh sách "Subsetting" cho phép chọn cách tạo font eot. Có bảy cách được WEFT hỗ trợ:
* 'Per Page' Subsetting
Việc phân tích font đặt trên cơ sở trang. Với mỗi trang, đối tượng font được tạo cho từng font. Mỗi đối tượng font chỉ chứa các ký tự được dùng trong một trang đặc biệt và chỉ liên kết với trang đó thôi.
* 'Per Site' Subsetting
Phân tích trên tất cả trang thuộc Web site trên cơ sở font được dùng. Chỉ một đối tượng font được tạo cho mỗi font chữ. Đối tượng này bao gồm tất cả ký tự được dùng bởi một trong các trang có dùng font đó.
* Family based Subsetting (default)
Số mẫu ký tự tính gộp từ các font thuộc cùng họ. Thí dụ trên trang có dùng chữ a, b font VNI-Times thường và có dùng chữ b, c font VNI-Times đậm thì font eot chữ thường hay chữ đậm đều có 3 mẫu ký tự a, b và c.
Cách tạo font này phải được chọn cho các trang Web động, nơi các script có thể thay đổi kiểu ký tự. Thí dụ, liên kết đã duyệt hiện dưới dạng chữ đậm trong khi liên kết chưa duyệt hiện dưới dạng chữ thường.
* 'Union' Subsetting
Bộ ký tự cho mỗi font được sưu tập từ tất cả các trang bất chấp font được dùng. Các đối tượng font được tạo chứa cùng một bộ ký tự.
Thí dụ a, b và c có font VNI-Times, c và d font VNI-Helve thì các đối tượng font tương ứng đều chứa a, b, c và d.
Cách này thường được dùng cho những trang HTML phức tạp, nơi có chỉ định style nhưng font thay đổi tùy tình huống.
* 'Raw' Subsetting
Tương tự như "union subsetting", nhưng tính cả những ký tự dùng trong các script hay chú thích cũng như các ký tự hiện ra trong cửa sổ trình duyệt khi trang được nạp.
* 'Language' subsetting
Font đối tượng tạo trên cơ sở ngôn ngữ được dùng thay vì thống kê các ký tự được dùng. Có thể chọn bất kỳ trong 96 Unicode code point ranges đặc tả bởi ISO 10646.
* No subsetting
Font đối tượng sẽ chứa tất cả ký tự trong mỗi font được dùng.
Khi chọn một trong các cách tạo font trên, ta có thể thấy ngay ở cột Chars số ký tự trên từng font thay đổi.
Bấm "Next".
4. Hộp thoại Create Font Objects hiện ra. Hộp thoại này dùng để chỉ định font eot tạo ra sẽ được đặt ở đâu và dùng cho những thư mục hay Web site nào.
Text box đầu tiên (đánh dấu trên hình bằng 1) dùng để nhập địa chỉ đặt font eot sẽ được tạo. Địa chỉ này nên là đĩa cứng, bắt đầu bằng file://, vì quá trình tạo font rất lâu và ta có thể upload lên Web site sau. Có thể gõ trực tiếp tên thư mục hay bấm nút "..." để tìm trên đĩa.
Text box thứ hai (đánh dấu trên hình bằng 2) dùng để chỉ định tên thư mục hay Web site được phép dùng các font eot này. Nếu ta chỉ định ở đây tên thư mục C:\ nhưng sau đó dùng cho trang Web đặt ở thư mục C:\TEST thì Internet Explorer sẽ không cài đặt font. Tương tự như vậy với các Web site. Ngoài ra, các trang Web có dùng font eot và các file font tương ứng phải nằm cùng chỗ, hoặc các file font nằm ở thư mục con thuộc cùng một Web site.
Những hạn chế này cũng có ở các trình tạo font khác, được Microsoft giải thích là để cho các Web site khác không thể dùng chung font một cách bất hợp pháp.
Để tạo bộ font chữ Việt dùng cho mọi trang Web (tất nhiên thuộc cùng thư mục hay cùng địa chỉ Web site), ở hộp thoại Fonts to Embed, bấm nút "Subset ..." và chọn tất cả các mẫu ký tự tiếng Việt cho dù chúng không được dùng trên trang Web đang phân tích. Tại giai đoạn 4 này, chúng ta chỉ định tất cả các địa chỉ dự định dùng bộ font này.
Có thể gõ trực tiếp các địa chỉ vào text box thứ hai. Địa chỉ trên đĩa bắt đầu bằng file://. Địa chỉ trên Web site bắt đầu bằng http://, https:// hay ftp:// tùy theo địa chỉ thực tế của Web site. Các địa chỉ đặt cách nhau bằng dấu ";". Thí dụ: file://c:\test;http://membres.tripod.fr/tedis/. Có thể bấm vào nút "Mirror site ..." để chọn địa chỉ trên đĩa hay từ Internet (nếu đang trực tuyến).
Nếu đánh dấu chọn ở hộp kiểm tra Show CSS@font-family declarations (đánh dấu trên hình bằng 3) thì sau khi tạo font, MS WEFT sẽ hiển thị hộp thoại trình bày mẫu CSS dùng để nhúng font vào trang Web.
Cuối cùng bấm lên nút Create Fonts và chờ đợi. Các file font eot sẽ được tạo và đặt đúng vào nơi qui định. Thông thường MS WEFT sẽ chèn thêm các dòng CSS vào bản sao của các trang Web đang phân tích và đặt chúng ở thư mục WebFontProjects trong My Documents.
<style TYPE="text/css">
<!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ?
@font-face {
font-family: VNI-Times;
font-style: normal;
font-weight: 700;
src: url(file:///C|/TEST/VNITIME1.eot);
}
@font-face {
font-family: VNI-Times;
font-style: normal;
font-weight: normal;
src: url(file:///C|/TEST/VNITIME0.eot);
}
@font-face {
font-family: Tahoma;
font-style: normal;
font-weight: 700;
src: url(file:///C|/TEST/VNTIME1.eot);
}
@font-face {
font-family: .vnTime;
font-style: normal;
font-weight: normal;
src: url(file:///C|/TEST/VNTIME0.eot);
}
?>
</style>
Kiểm tra
Đặt thêm một ký tự x trước tên font, thuộc dòng font-family trong khai báo style hay trên dòng "<font face=" trong phần <body>. Như vậy trang Web của chúng ta sử dụng font xVNI-Times, x.vnTime không có trong hệ thống, buộc IE sử dụng font đối tượng vừa được tạo. Lưu file và nhấn đúp lên tên file. Nếu nhìn thấy được chữ Việt là thành công. Chú ý là các font đối tượng của Bách Khoa không tạo được.
Nội dung trang Web đã sửa đổi như sau:
<html>
<head>
<title>test page</title>
<style TYPE="text/css">
<!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ?
@font-face {
font-family: xVNI-Times;
font-style: normal;
font-weight: 700;
src: url(file:///C|/TEST/VNITIME1.eot);
}
@font-face {
font-family: xVNI-Times;
font-style: normal;
font-weight: normal;
src: url(file:///C|/TEST/VNITIME0.eot);
}
@font-face {
font-family: xTahoma;
font-style: normal;
font-weight: 700;
src: url(file:///C|/TEST/VNTIME1.eot);
}
@font-face {
font-family: x.vnTime;
font-style: normal;
font-weight: normal;
src: url(file:///C|/TEST/VNTIME0.eot);
}
?>
</style>
</head>
<body>
<font face=xVNI-Times size=2>
<p><b>VNI-Times</b> VNI 2 byte [áàảảạ]
</font>
<font face=x.vnTime size=2>
<p><b>.vnTime</b> Tiêu chuẩn Việt Nam 3 [áàảãạ]
</font>
<font face=xvnTimes size=2>
<p><b>vnTimes</b> Bách Khoa HCM 1 byte [áàảãạ]
</font>
</body>
</html>
Tải lên Web site
Để dùng font đối tượng vừa tạo, chúng ta phải tải chúng lên Web site và đặt ở cùng thư mục với trang Web hoặc ở thư mục cấp con. Đường dẫn trong khai báo style cũng thay đổi cho phù hợp. Mặt khác, chúng ta có thể đổi tên các file font để tiện tham chiếu. Thí dụ:
Font VNI-Times thường: vniTimen.eot
Font VNI-Times đậm: vniTimeb.eot
Font ABC-Times thường: abcTimen.eot
Font ABC-Times đậm: abcTimeb.eot
Chú ý là mặc dù qui tắc đặt tên file 8 chấm 3, không cần tuân thủ tên file hay thư mục lại cần ghi chính xác chữ hoa hay chữ thường để tránh rắc rối do Web Server phân biệt chữ hoa và chữ thường.
Các file font nên đặt ở thư mục con fonts của Web site.
Khai báo style như sau:
<style TYPE="text/css">
<!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ?
@font-face {
font-family: VNI-Times;
font-style: normal;
font-weight: 700;
src: url(fonts/vniTimeb.eot)
}
@font-face {
font-family: VNI-Times;
font-style: normal;
font-weight: normal;
src: url(fonts/vniTimen.eot)
}
@font-face {
font-family: .vnTime;
font-style: normal;
font-weight: 700;
src: url(fonts/abcTimeb.eot)
}
@font-face {
font-family: .vnTime;
font-style: normal;
font-weight: normal;
src: url(fonts/abcTimen.eot)
}
?>
</style>
