Upload
hoc-lap-trinh-web
View
1.066
Download
20
Embed Size (px)
DESCRIPTION
Tổng quan về việc sử dụng font trên web: Lựa chọn font Phân loại font family trong CSS Định rõ kiểu chữ với CSS Web font an toàn ( web safe font) Liên kết font web Dịch vụ liên kết font web văn phòng Nhúng font web với javascript Những giải pháp để sử dụng font trên web Tổng quan về việc sử dụng font trên web: Lựa chọn font Phân loại font family trong CSS Định rõ kiểu chữ với CSS Web font an toàn ( web safe font) Liên kết font web Dịch vụ liên kết font web văn phòng Nhúng font web với javascript Những giải pháp để sử dụng font trên web
Citation preview
BÀI 5LÀM VIỆC VỚI FONT, TYPEFACE VÀ TỶ LỆ
NHỊP ĐIỆU TRONG TYPOGRAPHY
NHẮC LẠI BÀI TRƯỚC
Bản chất của ký tự (character)Các kiểu chữKý tự và font chữ mã hóa (encoding) trên webCách sử dụng symbol (biểu tượng)Các ký tự đặc biệt trong HTML
Bản chất của ký tự (character)Các kiểu chữKý tự và font chữ mã hóa (encoding) trên webCách sử dụng symbol (biểu tượng)Các ký tự đặc biệt trong HTML
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 2
MỤC TIÊU BÀI HỌC
Tổng quan về việc sử dụng font trên web:Lựa chọn fontPhân loại font family trong CSSĐịnh rõ kiểu chữ với CSS
Web font an toàn ( web safe font)Liên kết font webDịch vụ liên kết font web văn phòngNhúng font web với javascriptNhững giải pháp để sử dụng font trên web
Tổng quan về việc sử dụng font trên web:Lựa chọn fontPhân loại font family trong CSSĐịnh rõ kiểu chữ với CSS
Web font an toàn ( web safe font)Liên kết font webDịch vụ liên kết font web văn phòngNhúng font web với javascriptNhững giải pháp để sử dụng font trên web
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 3
TỔNG QUAN VỀ FONT TRÊN WEB
TỔNG QUAN VỀ FONT TRÊN WEB
Hiện nay có khoảng hơn 100.000 font đang được sửdụngVới web design thường sử dụng một tập hợp fontcon của 5 font chính5 font chữ chính thường sử dụng hiện nay:
TimesArialGeorgiaVerdanaTrebuchet MS
Hiện nay có khoảng hơn 100.000 font đang được sửdụngVới web design thường sử dụng một tập hợp fontcon của 5 font chính5 font chữ chính thường sử dụng hiện nay:
TimesArialGeorgiaVerdanaTrebuchet MS
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 5
TỔNG QUAN VỀ FONT TRÊN WEB
Typography là một trong những cách lựa chọn kiểufont chữ để sử dụng4 phương thức để sử dụng kiểu font chữ trên trangweb:
Web font an toàn (Web safe font)Liên kết font web (Linked web font)Dịch vụ liên kết font web văn phòng (Web fontservice bureaus)Nhúng font web với javascript (Web font embedding )
Typography là một trong những cách lựa chọn kiểufont chữ để sử dụng4 phương thức để sử dụng kiểu font chữ trên trangweb:
Web font an toàn (Web safe font)Liên kết font web (Linked web font)Dịch vụ liên kết font web văn phòng (Web fontservice bureaus)Nhúng font web với javascript (Web font embedding )
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 6
TỔNG QUAN VỀ FONT TRÊN WEB
Web font an toànFont được sử dụng giốngnhư được cài đặt trướctrên máy người dùng (user)
Liên kết font webFont được sử bằng cáchdownload từ server về máyngười dùng như dạngimage
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 7
Font được sử bằng cáchdownload từ server về máyngười dùng như dạngimage
Dịch vụ liên kết font webvăn phòng
Font được sử bằng cáchdownload từ bên thứ 3 vềmáy người dùng
Nhúng font web vớijavascript
Sử dụng Javascript để thayđổi ký tự thành nét họa tiếttừ những font đặc biệt
TỔNG QUAN VỀ FONT TRÊN WEB
Cách chính xác nhất để tạo web typography là sửdụng cách phân loại font family trong CSS
Serif: font có chân (Times, Georgia, Garamond, …)
Sans-serif: font không chân (Arial, Helvertica, Gothic, …)
Cách chính xác nhất để tạo web typography là sửdụng cách phân loại font family trong CSS
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 8
CSS font family Monospace: font mà khoảng cách và chiều cao của các ký tự gầnnhư nhau (Courier, Courier New, …)
Cursive: font dạng kiểu chữ viết tay (Snell Roundhand, LucidaCalligraphy, …)
Fantasy: font Bauhaus93, Cracked, Curlz MT
TỔNG QUAN VỀ FONT TRÊN WEB
Phân loại font family trong CSS giúp trình duyệt dễdàng nhận biết được font mà bạn sử dụngTrong CSS để định nghĩa font sử dụng trên web sử dụng thuộc tính font hoặc font-family:
font: cho phép định dạng toàn bộ thuộc tính về font(kiểu font chữ, kích thước, kiểu dáng hiển thị,…)font-family: chỉ cho phép bạn định dạng kiểu font chữ(không chân, có chân,…)
Phân loại font family trong CSS giúp trình duyệt dễdàng nhận biết được font mà bạn sử dụngTrong CSS để định nghĩa font sử dụng trên web sử dụng thuộc tính font hoặc font-family:
font: cho phép định dạng toàn bộ thuộc tính về font(kiểu font chữ, kích thước, kiểu dáng hiển thị,…)font-family: chỉ cho phép bạn định dạng kiểu font chữ(không chân, có chân,…)
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 9
TỔNG QUAN VỀ FONT TRÊN WEB
font-stack:Là danh sách họ font được sử dụng trên máy người dùngNếu như trên máy người dùng không có các font chỉ định cụthể (helvetica, arial) thì những font cùng họ sẽ được sử dụng
font-family: helvetica, arial, sans-serif;
font: bold italic normal 12px/1.5 helvetica, arial, sans-serif;
Định nghĩa font sử dụng là dạng không chân,có chân,… (hay được gọi là font-stack)
font-stack:Là danh sách họ font được sử dụng trên máy người dùngNếu như trên máy người dùng không có các font chỉ định cụthể (helvetica, arial) thì những font cùng họ sẽ được sử dụng
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 10
Định nghĩa kích thước chữ
Định nghĩa kiểu hiển thị: dạng nét đậm, innghiêng bình thường
WEB FONT AN TOÀN
WEB SAFE FONT
Khi người dùng duyệt trang web, nếu như fontkhông được sử dụng trên trình duyệt web thì nộidung của trang web không được hiển thịThường sử dụng 9 web font cơ bản (core) có trongmáy tính:
Tối ưu hóa cho việc hiển thị trên màn hìnhCung cấp được các font khác trong một tập hợp họfontCho phép quốc tế hóa với các font chữ đa ngôn ngữ
Thường có 10 font chữ được lựa chọn, bản quyềnthuộc về Microsoft, có trong cả máy MAC và PC
Khi người dùng duyệt trang web, nếu như fontkhông được sử dụng trên trình duyệt web thì nộidung của trang web không được hiển thịThường sử dụng 9 web font cơ bản (core) có trongmáy tính:
Tối ưu hóa cho việc hiển thị trên màn hìnhCung cấp được các font khác trong một tập hợp họfontCho phép quốc tế hóa với các font chữ đa ngôn ngữ
Thường có 10 font chữ được lựa chọn, bản quyềnthuộc về Microsoft, có trong cả máy MAC và PC
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 12
LIÊN KẾT FONT WEB
LIÊN KẾT FONT WEB
Địnhdạng
web font
OpenType
(OTF)
TrueType
(TTF)
EmbeddedOpenType
(EOT)
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 14
Địnhdạng
web font
TrueType
(TTF)
Web OpenFont
Format
(WOFF)
EmbeddedOpenType
(EOT)
LIÊN KẾT FONT WEB
OTF & TTF:2 định dạng thường sử dụng hiện nayTrình duyệt hỗ trợ: Firefox, Safari, OperaIE chỉ hỗ trợ khi không sử dụng bảngCó thể convert thành định dạng SVG, giống như địnhdạng vector
Embedded OpenType (EOT):Font EOT được tạo:
• Từ quá trình convert font TTF• Convert font OTF TTF EOT
Web Open Font Format (WOFF):Quá trình tạo giống như quá trình tạo font EOT
OTF & TTF:2 định dạng thường sử dụng hiện nayTrình duyệt hỗ trợ: Firefox, Safari, OperaIE chỉ hỗ trợ khi không sử dụng bảngCó thể convert thành định dạng SVG, giống như địnhdạng vector
Embedded OpenType (EOT):Font EOT được tạo:
• Từ quá trình convert font TTF• Convert font OTF TTF EOT
Web Open Font Format (WOFF):Quá trình tạo giống như quá trình tạo font EOT
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 15
LIÊN KẾT FONT WEB
Định dạng SVG:Là định dạng chuẩn của web theo W3CCó thể thêm thông tin vector vào trang webTrình duyệt hỗ trợ: Firefox, Safari, OperaIE: coi SVG như 1 pluginLệnh trỏ tới file SVG:
Định dạng SVG:Là định dạng chuẩn của web theo W3CCó thể thêm thông tin vector vào trang webTrình duyệt hỗ trợ: Firefox, Safari, OperaIE: coi SVG như 1 pluginLệnh trỏ tới file SVG:
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 16
Fontfile.svg#FontInfoReference
LIÊN KẾT FONT WEB
Upload font lên web server:Sử dụng FTP để upload fontMột số vấn đề khi upload font:
• Path (đường dẫn)• Cross-domain:• Server: tương tích với định dạng MIME dành cho font
Xác định kích thước file để không bị ảnh hưởng bởivấn đề bandwidth:
Number of glyphsFont shapeMetadataFont format
Upload font lên web server:Sử dụng FTP để upload fontMột số vấn đề khi upload font:
• Path (đường dẫn)• Cross-domain:• Server: tương tích với định dạng MIME dành cho font
Xác định kích thước file để không bị ảnh hưởng bởivấn đề bandwidth:
Number of glyphsFont shapeMetadataFont format
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 17
WEB FONT LINKING
Link font tới trang web:Tên họ font-familyĐường dẫn (source): đường dẫn tới file font. Lệnh@font-face có thể chèn thêm nhiều sourceTên localĐịnh dạng gợi ýĐịnh kiểu, kích thước, biến đổi
Link font tới trang web:Tên họ font-familyĐường dẫn (source): đường dẫn tới file font. Lệnh@font-face có thể chèn thêm nhiều sourceTên localĐịnh dạng gợi ýĐịnh kiểu, kích thước, biến đổi
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 18
@font-face {font-family: fontinsans;src: url(‘fonts/Fontin_Sans_R.otf’ format(‘opentype’));
}
h1 {font-family: fontinsans, helvetica, arial, sans-serif; }
WEB FONT LINKING
@font-face {font-family: fontinsans;src:
local (‘Fontin Sans Bold’),local (‘Fontin Sans Bold’),url(‘fonts/Fontin_Sans_R.otf’ format(‘opentype’));
font-weight:bold;font-style: normal;font-variant: normal;
}
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 19
@font-face {font-family: fontinsans;src:
local (‘Fontin Sans Bold’),local (‘Fontin Sans Bold’),url(‘fonts/Fontin_Sans_R.otf’ format(‘opentype’));
font-weight:bold;font-style: normal;font-variant: normal;
}
Định kiểu dáng
Tên họ font
Đường dẫn, tên local của font
DỊCH VỤ LIÊN KẾT FONT WEBVĂN PHÒNG
DỊCH VỤ LIÊN KẾT FONT WEB VĂN PHÒNG
Dịch vụ này cho phép chọn font bản quyền mộtcách dễ dàng để sử dụng trên trang webDịch vụ bao gồm:
1 danh mục hạn chế (đang phát triển) của font cósẵnCó thể sẽ mất chi phí nếu như bạn muốn có font chữlocal để tạo ra những graphic phức tạpFont sẽ được phân phối bởi một server thứ 3 nên bạncó thể tin tưởng vào tốc độ load trên site
Dịch vụ này cho phép chọn font bản quyền mộtcách dễ dàng để sử dụng trên trang webDịch vụ bao gồm:
1 danh mục hạn chế (đang phát triển) của font cósẵnCó thể sẽ mất chi phí nếu như bạn muốn có font chữlocal để tạo ra những graphic phức tạpFont sẽ được phân phối bởi một server thứ 3 nên bạncó thể tin tưởng vào tốc độ load trên site
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 21
DỊCH VỤ LIÊN KẾT FONT WEB VĂN PHÒNG
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 22
DỊCH VỤ LIÊN KẾT FONT WEB VĂN PHÒNG
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 23
DỊCH VỤ LIÊN KẾT FONT WEB VĂN PHÒNG
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 24
NHÚNG FONT WEB VỚI JAVASCRIPT
NHÚNG FONT WEB VỚI JAVASCRIPT
Giống như việc sử dụng lệnh @font-face để nhúngdữ liệu font vào trang webCách thông dụng để tạo Javascript và nhúng dữ liệufont là thông qua kỹ thuật Cufón
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 26
NHÚNG FONT WEB VỚI JAVASCRIPT
Cách sử dụng kỹ thuật Cufón1. download đoạn code cufon-yui.js Cufón trên tranghttp://cufon.shoqolate.com
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 27
NHÚNG FONT WEB VỚI JAVASCRIPT
2. Xuất file Javascript font:• Trong các hộp thoại đưa đường dẫn tới file font muốn
convert
• Nhập tên font và đánh dấu hộp kiểm EULA
2. Xuất file Javascript font:• Trong các hộp thoại đưa đường dẫn tới file font muốn
convert
• Nhập tên font và đánh dấu hộp kiểm EULA
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 28
WEB FONT EMBEDDING VỚI JAVASCRIPT
• Đánh dấu hộp kiểm All
• Đánh dấu hộp kiểm Terms• Nhấn nút "Let's do this" để download file js được tạo ra
• Đánh dấu hộp kiểm All
• Đánh dấu hộp kiểm Terms• Nhấn nút "Let's do this" để download file js được tạo ra
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 29
WEB FONT EMBEDDING VỚI JAVASCRIPT
3. Thay đổi tên file font và các tùy chọn khác4. Upload file lên server của bạn và link đến trangweb
<script src=“cufon-yui.js” type=“text/javascript”></script>
<script src=“iavlo-RB.js” type=“text/javascript”></script>
3. Thay đổi tên file font và các tùy chọn khác4. Upload file lên server của bạn và link đến trangweb
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 30
<script src=“Fontin_Sans-RBIBI.js” type=“text/javascript”></script>
NHÚNG FONT WEB VỚI JAVASCRIPT
5. sử dụng Javascript để add thêm định dạng kiểucho font-family
<script type=“text/javascript”>Cufon.replace (‘h1’, { fontFamily:’Diavlo’});Cufon.replace (‘h1’, { fontFamily:’Diavlo’});…..
</script>
5. sử dụng Javascript để add thêm định dạng kiểucho font-family
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 31
<script type=“text/javascript”>Cufon.replace (‘h1’, { fontFamily:’Diavlo’});Cufon.replace (‘h1’, { fontFamily:’Diavlo’});…..
</script>
GIẢI PHÁP SỬ DỤNG FONT TRÊN WEB
GIẢI PHÁP SỬ DỤNG FONT TRÊN WEB
Tất cả các cách sử dụng font trên web đưa ra bêntrên không phải là giải pháp hoàn hảo nhấtKhi sử dụng font trên web cần thiết phải chú ý:
Trình duyệt phải hỗ trợFont có trong máy tínhTốc độBản quyềnTương thích của CSSNgười dùng
Tất cả các cách sử dụng font trên web đưa ra bêntrên không phải là giải pháp hoàn hảo nhấtKhi sử dụng font trên web cần thiết phải chú ý:
Trình duyệt phải hỗ trợFont có trong máy tínhTốc độBản quyềnTương thích của CSSNgười dùng
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 33
TỔNG KẾT
5 font chữ thường sử dụng hiện nay: times, arial,georgia, verdana, trebuchet MS4 phương thức để sử dụng kiểu font chữ trên trangweb:
Web safe fontLinked web fontWeb font service bureausWeb font embedding
Các định dạng font cần chú ý khi sử dụng trên web:OTF, TTF, WOF, EOT & các trình duyệt hỗ trợ nhữngđịnh dạng đó
5 font chữ thường sử dụng hiện nay: times, arial,georgia, verdana, trebuchet MS4 phương thức để sử dụng kiểu font chữ trên trangweb:
Web safe fontLinked web fontWeb font service bureausWeb font embedding
Các định dạng font cần chú ý khi sử dụng trên web:OTF, TTF, WOF, EOT & các trình duyệt hỗ trợ nhữngđịnh dạng đó
Slide 5 - Làm việc với font, typeface và tỷ lệ nhịp điệu trong Typography 34