Thắc mắc về Bảng mã và Icon Fonts

Đầu tiên, chúng ta phải hiểu là file mà chúng ta thấy chỉ là do máy tính đã biểu diễn đánh lừa chúng ta mà thôi. Chứ thực ra, data luôn được biểu diễn thế này:

00110011 11001111 11111111
(mỗi byte là 8 bit nhớ)

Font trước kia là 1 bộ ảnh với mỗi ảnh là hình ảnh của 1 chữ cái (gọi là glyph). Việc vẽ các glyph này được gọi là typography và do các hoạ sỹ họ vẽ, nói chung, ngày giỏi lắm vẽ được 1 chữ trong bộ font mà thôi. 1 chữ lại gồm nhiều size nữa nên 1 font vẽ chắc cũng cả tháng mới xong ^^ Các font này còn được gọi là font raster. Nhược điểm là font raster nếu hoạ sỹ không vẽ size đó thì máy phải scale dựa vào thuật toán resize.

Icon font là font vector, các glyph giờ được render nhờ định nghĩa cách vẽ nên phóng to thu nhỏ không bị vỡ. Tuy nhiên, thay vì vẽ character, các iconfont đi vẽ icon/biểu tượng.

Hình vẽ dưới là glyph của 1 font.

N3tEC.png1194x695 39.2 KB

Unicode hay còn gọi là character encoding là tập hợp ánh xạ qui định byte này được ánh xạ sang character/glyph nào (trong font họ qui định glyph này sẽ hiện thị character gì). Ví dụ như bảng dưới đây là của UTF8 (còn gọi là 1 code pages, mỗi ánh xạ được gọi là 1 code point)

2016-11-10_22-08-35.jpg1222x547 97.9 KB

Quay trở lại cái 3 ký tự phía trên, nó sẽ được máy tính lừa tình in ra: (cái máy tinhs) (mặt trời) (bao cao su) khi sử dụng font awesome, utf8 encoding. Nếu chọn sang bảng mã khác, ví dụ utf16, byte này được ánh xạ sang character khác nên nó in ra (cái búa) (ngôi sao) (con ve).

Vậy nếu không có qui định bảng mã, nó vẫn hiển thị do chọn mặc định của hệ thống. Còn nếu có qui định bảng mã thì nó hiển thị theo bảng mã mình chọn. Cái này cũng tương tự với 1 chuỗi, ở UTF8 thì nó là “Tôi”, sang bảng mã VNI nó thành “þÿj”

Unicode là tập hợp ánh xạ ký tự nào được ánh xạ sang code point nào mới đúng, còn UTF-8, UTF-16, UCS-2, v.v… là tập hợp ánh xạ code point tới code value…

Hi, cái này mình nhầm thật.

Unicode định nghĩa code spaces chứa 1.114.112 code points (các code point được refer là U+ {số thứ tự code point} như U+0058 sẽ ánh xạ sang chữ chữ/glyph X). Còn UTF8 là cách mã hoá, ví dụ chữ € (U+20AC) được mã bằng 3 byte (11100010 10000010 10101100). Nên các chữ có mũ như Ô, ô, … sẽ làm kích thước file to lên.

Bảng code page phía trên của UTF8, dòng 1 chính là chữ/glyph, dòng 2 là utf8 mã hexa (họ viết 0020 nhưng thực ra lưu trong file chỉ là 20 thôi), dòng 3 là code point theo thứ tự đếm thông thường. Cám ơn @tntxtnt đã correct lại. ^^

Vậy các bit sẽ quy định một kỹ tự cụ thể ạ? Ví dụ 00001011 quy định là chứ a, 00100101 là b… nếu mã hóa theo Utf-8 thì ra chữ a, còn theo kiểu mã hóa khác thì lại ra kỹ tự khác ạ?

Có phải là Unicode thì có quá nhiều ký tự mà bàn phím “không có nút để bấm được” nên họ mới tạo ra font ạ?

Vậy các bit sẽ quy định một kỹ tự cụ thể ạ? Ví dụ 00001011 quy định là chứ a, 00100101 là b… nếu mã hóa theo Utf-8 thì ra chữ a, còn theo kiểu mã hóa khác thì lại ra kỹ tự khác ạ?

LATIN SMALL LETTER A (U+0061)

Get the complete details on Unicode character U+0061 on FileFormat.Info

LATIN SMALL LETTER A WITH CIRCUMFLEX AND ACUTE (U+1EA5)

Get the complete details on Unicode character U+1EA5 on FileFormat.Info

SMILING FACE WITH OPEN MOUTH (U+1F603)

Get the complete details on Unicode character U+1F603 on FileFormat.Info

nếu bạn muốn tìm hiểu “sơ sơ” thêm chút nữa thì bạn nên đọc trang này: http://www.joelonsoftware.com/articles/Unicode.html

dịch sơ:

• Ban đầu chỉ có các ký tự tiếng Anh được mã hóa để máy tính hiểu, và kiểu mã hóa là ASCII, 7-bit, chỉ chứa được 2⁷~128 ký tự khác nhau
• Nhưng kiểu dữ liệu char 1 byte cho phép lưu tới 8 bit, hay 256 giá trị, vậy còn 128 giá trị còn lại có thể đại diện cho 128 ký tự khác nhau nữa. Cách mã hóa “mở rộng” này gọi là ANSI. Vấn đề là nhiều người có suy nghĩ này, nên họ “gắn” 128 giá trị còn lại cho đủ loại ký tự khác nhau, tùy theo ngôn ngữ mà họ sử dụng. Vd người Nga ký tự có số mã hóa là 129 sẽ khác với người Hy Lạp, v.v… Để phân biệt 129 đại diện cho ký tự nào, người ta phải nhờ “code pages” như trong link này bạn thấy có code page cho Tây Âu, Trung Âu, Ả Rập, Hy Lạp, Nga, Thổ Nhĩ Kỳ, v.v… Như vậy 1 mã số ANSI > 127 có thể đại diện cho 5-10 kiểu ký tự khác nhau, tùy vào code page nào đang được sử dụng.
• Đối với người châu Á hay những nước xài chữ tượng hình như TQ, Nhật, v.v… thì số ký tự có thể lên tới hàng ngàn => char 8-bit ko tài nào chứa hết => với những ký tự ko đủ chỗ chứa thì cần thêm 1 byte nữa => chuỗi 1-byte, 2-bytes lẫn lộn…
• Unicode được thành lập với nỗ lực liệt kê tất cả các ký tự mà con người tạo ra. Trước đây chúng ta mã hóa ký tự thẳng thành mã số để lưu vào máy. Unicode thêm 1 bước trung gian, thay vì mã hóa ký tự thành mã máy, Unicode mã hóa ký tự thành “code points”, hay là phát thẻ ID cho từng ký tự. Trong Unicode, 1 code point đại diện cho duy nhất 1 ký tự. Rồi sau đó các code point này được mã hóa thành mã máy.
• Trước đó người ta nghĩ chỉ cần xài 2-bytes lưu 65536 kiểu ký tự là khá đủ, hay còn gọi là UCS-2, nhưng Unicode liệt kê được khoảng hơn 1 triệu ký tự khác nhau. Như vậy UCS-2 ko đại diện hết cho 1 triệu code points này được. Cách đơn giản nhất để mã hóa tất cả 1 triệu code points này thành mã máy là xài kiểu dữ liệu 4-bytes. Cách mã hóa này gọi là UCS-4 hay UTF-32. Cách này đơn giản dễ hiểu nhưng cực kì phí băng thông khi truyền dữ liệu, hay tốn dung lượng ổ cứng khi lưu trữ.
• UTF-8 ra đời, cho phép mã hóa hết 1 triệu code points, 1 code point chuyển thành mã máy có thể là mã 1-byte tới mã 6-bytes, nhưng thực tế hiện tại tối đa là mã 4-bytes. Với ASCII hay UCS-2 hay UCS-4 thì 1 ký tự chuyển thành mã máy có kích cỡ cố định (1, 2, hoặc 4 bytes), với UTF-8 thì chuyển xuống mã máy ko còn có kích cỡ cố định nữa. Đây là nhược điểm chính của UTF-8. Còn vài ưu điểm của UTF-8 là nó mã hóa được tất cả các code points (tốt hơn UCS-2), và những mã ASCII 0-127 được lưu đúng 1-byte, hay nói cách khác nếu văn bản chỉ chứa ký tự ASCII thì mã hóa UTF-8 hay ASCII đều ra mã máy y hệt như nhau (tốt hơn UCS-2 do ASCII ko đọc văn bản UCS-2 được).

Em cũng hiểu sơ sơ rồi ạ! Mà anh giải thích qua Font được không ạ? Nhân tiện cho em hỏi luôn là chỉ có utf-xx mới mã hóa hết 1 triệu code points mà trong HTML em khai báo meta charset=“khác utf-xx” mà sao Icon Font vẫn hiện thị được ạ?

vậy có lẽ là người ta dùng thư viện riêng cho icon, hay là CSS icon, ko phải là font: http://www.w3schools.com/w3css/w3css_icons.asp

quăng vô thẻ <i> như ví dụ trong trang w3schools đó, nhưng phải có link tới thư viện icon riêng đó:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Anh nói qua Font một chút được không ạ?

nói cái gì về font… Bạn Google đi, mình ko phải chuyên gia về font nên ko dám chém gió về font

Ký tự được lưu trong font như thế nào

Font theo chuẩn Unicode

Sử dụng font trong web

Vậy các bit sẽ quy định một kỹ tự cụ thể ạ? Ví dụ 00001011 quy định là chứ a, 00100101 là b… nếu mã hóa theo Utf-8 thì ra chữ a, còn theo kiểu mã hóa khác thì lại ra kỹ tự khác ạ?

Bạn xem thêm toàn bộ codepage ở đây: https://en.wikipedia.org/wiki/Code_page

1. Không phải chỉ có mỗi bảng mã ANSI. Việt Nam mình trước kia chưa có UTF8 sử dụng codepage VNI hoặc ABC (hình như là ISO1129 và 1163). Với các bảng mã không phải ANSI thì kể cả < 127 nó vẫn là ký tự khác. Bạn cứ mở tài liệu utf8, rồi chọn font VNI hoặc ABC sẽ biết ngay mà.
2. UTF16 cũng như UTF8 có độ dài biến đổi, nên UTF16 # UCS2.
   https://en.wikipedia.org/wiki/Unicode
3. Ngoài ra, với các mã như UTF16, có thể mã kiểu đầu trứng to (big endian) hay đầu trứng nhỏ (little endian), ví dụ như BE của € là 20 AC, còn LE là AC 20

Có phải là Unicode thì có quá nhiều ký tự mà bàn phím “không có nút để bấm được” nên họ mới tạo ra font ạ?
Không phải, font bao giờ cũng phải có, kể cả chỉ có các ký tự ASCII. Font giúp máy tính vẽ nên chữ, chứ làm sao mà nó có thể hiển thị cho bạn mã được.

Các font unicode đã phần chỉ là partial thôi, nghĩa là chứa các hệ chữ latin là chủ yếu, chứ còn hệ “dây dợ, ô vuông” như chữ Thái, chữ Tàu thì … chắc phải bọn Thái, Tàu nó phải tự làm.

Em cũng hiểu sơ sơ rồi ạ! Mà anh giải thích qua Font được không ạ? Nhân tiện cho em hỏi luôn là chỉ có utf-xx mới mã hóa hết 1 triệu code points mà trong HTML em khai báo meta charset=“khác utf-xx” mà sao Icon Font vẫn hiện thị được ạ?
Bạn cứ chọn một codepage không phải ANSI xem nó có hiển thị đúng không?

.fa-heart:before { content: "\f004";}

Đây là icon của trái tim, nó ở codepoints F004 đó.

Không phải, font bao giờ cũng phải có, kể cả chỉ có các ký tự ASCII. Font giúp máy tính vẽ nên chữ, chứ làm sao mà nó có thể hiển thị cho bạn mã được

Thế Unicode phải định nghĩa thì mới ánh xạ được chứ ạ?
Như ký tự này trong Font phải định nghĩa trong Bảng Mã thì mới hiện thị được ạ?

Trong unicode table có những vùng code point là những vùng trống cho phép những cá nhân, bên thứ 3 tự định nghĩa những ký tự của riêng mình mà không xung đột với những ký tự đã được chuẩn hóa. Những vùng đó gọi là Private Use Area.

The code points in these areas cannot be considered as standardized characters in Unicode itself. They are intentionally left undefined so that third parties may define their own characters without conflicting with Unicode Consortium assignments. Under the Unicode Stability Policy,[2] the Private Use Areas will remain allocated for that purpose in all future Unicode versions.

https://en.wikipedia.org/wiki/Private_Use_Areas

Ba vùng đó hiện tại nằm ở các khoảng:

Basic Multilingual Plane (BMP): U+E000 – U+F8FF (6.400 code points)
Planes 15 and 16: U+F0000 – U+​10FFFF

Font Awesome lấy khoảng code point từ U+F000 - U+F2E0 (736 code points) của BMP để thiết kế và chỉ có font của nó mới biết hiển thị ký tự nó định nghĩa. Trong tài liệu của nó có đề cập ở đây.

Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf, set it as the font in your application, and copy and paste the icons (not the unicode) directly from this page into your designs.

http://fontawesome.io/cheatsheet/

À, em hiểu rồi! Cảm Ơn Tất Cả!!!