Thông thường, khi muốn xem kiểu chữ của font trong Windows, bạn phải đi qua rất nhiều bước. Trước hết phải vào Control Panel, vào phần Font, muốn xem font nào lại phải nhấn đúp vào font đó. Cách thức này mất nhiều thời gian khi máy bạn có tới hàng trăm font. Vậy còn cách nào đơn giản hơn không? Câu trả lời là có, bạn có thể tự tạo một chương trình quản lý font chữ trên nền JavaScript cực kỳ đơn giản.
Đầu tiên, bạn mở Notepad hoặc bất kỳ một chương trình soạn thảo nào. Chọn File->New, sau đó chọn tiếp File->Save, nhập tên file là Font.htm. Bạn nhập đoạn mã sau vào file Font.htm vừa tạo.
<OBJECT ID=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0px" HEIGHT="0px"></OBJECT>
Đoạn mã trên làm công việc chèn thành phần (control) có sẵn của Windows vào trang web, với định danh (ID) là "dlgHelper". Sau đó, bạn chèn thêm ListBox (thực ra là một drop-down box) mang thuộc tính multiple, định danh là aOptions.
<select size="16" name=’aOptions’ onchange="loadfont(this[this.selectedIndex].value);" multiple width=100% height=100%>
</select>
Cuối cùng, bạn chèn một IFRAME in ra nội dung với kiểu chữ nhận từ ListBox.
<Iframe name=display width=100% height=100%></Iframe>
Thế là bạn đã làm xong một nửa phần việc. Tiếp theo bạn chỉ việc viết mã để điều khiển control theo ý mình. Chúng ta sẽ truy xuất tới thuộc tính fonts của control để lấy danh sách font chữ mà Windows đã nạp. Sau đó, với mỗi một tên font được trả về, chúng ta nạp nó vào ListBox. Tất cả công việc này được thực hiện với hàm font2(). Bạn chèn đoạn mã sau vào trang web:
|
<script>
function font2(){
var fArray = new Array();
for (i = 1;i < dlgHelper.fonts.count;i++){
fArray = dlgHelper.fonts(i);
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray;
oOption.value = fArray;
}
}
</script>
Tiếp theo, chúng ta sẽ viết một hàm thực hiện công việc in ra kiểu font ra IFRAME với nội dung theo ý muốn (ví dụ: HAPPY NEW YEAR.). Bạn chèn đoạn mã sau vào ngay sau hàm font2()
var hang1="A B C D E F G H I J K L M N O P Q R S T U V W X Y Z"
var hang2="1 2 3 4 5 6 7 8 9 0 , . ; : ( * " ! ? )"
var hang3=" HAPPY NEW YEAR."
// Trên đây là các hàm chứa nội dung in ra màn hình
function loadfont(font){
display.document.open()
display.document.write("<font face=’"+font+"’>"+hang1+"</font><br/>")
display.document.write("<font face=’"+font+"’>"+hang2+"</font><br/><hr>")
display.document.write("12.<font face=’"+font+"’ size=1> "+hang3+"</font><br/>")
display.document.write("18.<font face=’"+font+"’ size=2> "+hang3+"</font><br/>")
display.document.write("24.<font face=’"+font+"’ size=3> "+hang3+"</font>< br/>")
display.document.write("36.<font face=’"+font+"’ size=4> "+hang3+"</font><br/>")
display.document.write("48.<font face=’"+font+"’ size=5> "+hang3+"</font><br/>")
display.document.write("60.<font face=’"+font+"’ size=6> "+hang3+"</font><br/>")
display.document.write("72.<font face=’"+font+"’ size=7> "+hang3+"</font><br/>")
//In ra IFRAME nội dung trên, với thuộc tính font chữ nhận từ biến font
display.document.close()
}
Công việc cuối cùng để hoàn thành chương trình là gắn hàm font2() vào thuộc tính onload của thẻ <BODY>, để hàm này có thể tự động kích hoạt khi chạy chương trình. Bạn chèn đoạn mã sau vào đầu trang:
<body onload="font2();">
Vậy là bạn đã hoàn thành chương trình quản lý font chữ Windows. Bây giờ hãy xem kết quả của chúng ta, Bạn mở file Font.htm vừa tạo bằng trình duyệt Internet Explorer. Muốn xem kiểu font nào bạn chỉ việc chọn tên font ở bảng danh sách, nội dung font đó sẽ hiện lên ở bảng bên cạnh (xem hình).
Bạn có thể thêm bớt, chính sửa để chương trình hoạt động theo ý mình. Chẳng hạn muốn viết một WYSIWYG (chương trình soạn thảo web) dựa trên JavaScript, bạn có thể sử dụng đoạn mã trên để tạo một drop-down box chứa tên các font có trong Windows.
