ໃນຂະນະທີ່ຮູບພາບໄດ້ຮັບຄວາມຮັກຫຼາຍເມື່ອມັນມາຮອດເວັບໄຊທ໌, ມັນແມ່ນຄໍາທີ່ຂຽນທີ່ເອີ້ນວ່າເຄື່ອງຈັກຊອກຫາແລະສົ່ງເນື້ອຫາຂອງເວັບໄຊທ໌ສ່ວນຫຼາຍ. ດັ່ງນັ້ນ, ການອອກແບບ typographic ແມ່ນສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການອອກແບບເວັບໄຊທ໌. ມີຄວາມສໍາຄັນຂອງຂໍ້ຄວາມຂອງເວັບໄຊທ໌ເປັນສິ່ງຈໍາເປັນເພື່ອຮັບປະກັນວ່າມັນເບິ່ງດີແລະງ່າຍຕໍ່ການອ່ານ. ນີ້ແມ່ນເຮັດດ້ວຍ CSS (Cascading Style Sheets) ຄໍເຕົ້າໄຂ່ທີ່.
ປະຕິບັດຕາມມາດຕະຖານການອອກແບບເວັບທີ່ທັນສະໄຫມ, ເມື່ອທ່ານຕ້ອງການກໍານົດເບິ່ງເນື້ອໃນຂອງເນື້ອໃນຂອງເວັບໄຊທ໌, ທ່ານຈະເຮັດແນວນັ້ນໂດຍໃຊ້ CSS. ນີ້ແຍກລັກສະນະ CSS ຈາກໂຄງສ້າງ HTML ຂອງຫນ້າ. ຕົວຢ່າງເຊັ່ນຖ້າທ່ານຕ້ອງການກໍານົດຫນ້າທີ່ຂອງຫນ້າເພື່ອ "Arial", ທ່ານສາມາດເຮັດໄດ້ໂດຍການເພີ່ມກົດລະບຽບແບບຕໍ່ໄປນີ້ໃຫ້ກັບ CSS ຂອງທ່ານ (note - ນີ້ອາດຈະເຮັດໃນເອກະສານສະໄຕ CSS ພາຍນອກທີ່ອໍານວຍໃຫ້ມີຮູບແບບ ສໍາລັບຫນ້າທຸກໆເວັບໄຊທ໌):
body {font-family: Arial }ຕົວອັກສອນນີ້ຖືກກໍານົດໄວ້ສໍາລັບ "ຮ່າງກາຍ", ສະນັ້ນ CSS cascade ຈະນໍາໃຊ້ແບບສໍາຫຼັບທຸກອົງປະກອບອື່ນໆຂອງຫນ້າ. ນີ້ແມ່ນຍ້ອນວ່າທຸກໆເອກະສານ HTML ອື່ນໆແມ່ນເດັກຂອງອົງປະກອບ "ຮ່າງກາຍ", ຄໍເຕົ້າໄຂ່ທີ່ CSS ເຊັ່ນວ່າຄອບຄົວສີຫຼືສີຈະ cascade ຈາກພໍ່ແມ່ໄປຫາອົງປະກອບຂອງເດັກ. ນີ້ຈະເປັນກໍລະນີເວັ້ນເສຍແຕ່ວ່າແບບສະເພາະໃດຫນຶ່ງແມ່ນຖືກເພີ່ມສໍາລັບອົງປະກອບທີ່ແນ່ນອນ. ບັນຫາດຽວກັບ CSS ນີ້ແມ່ນວ່າມີພຽງແຕ່ຕົວອັກສອນດຽວເທົ່ານັ້ນ. ຖ້າຕົວອັກສອນທີ່ບໍ່ສາມາດພົບໄດ້ສໍາລັບບາງເຫດຜົນ, ຕົວທ່ອງເວັບຈະທົດແທນຄົນອື່ນໃນສະຖານທີ່ຂອງມັນ. ນີ້ແມ່ນບໍ່ດີຍ້ອນວ່າທ່ານບໍ່ສາມາດຄວບຄຸມສິ່ງທີ່ໃຊ້ອັກສອນທີ່ໃຊ້ - ຕົວທ່ອງເວັບຈະເລືອກເອົາສໍາລັບທ່ານແລະທ່ານອາດຈະບໍ່ມັກສິ່ງທີ່ມັນຕັດສິນໃຈໃຊ້! ນັ້ນແມ່ນບ່ອນທີ່ font stack ມາ.
stack font ເປັນບັນຊີລາຍຊື່ຂອງ fonts ໃນການປະກາດ font family-font CSS. ຕົວອັກສອນແມ່ນຢູ່ໃນລໍາດັບຄວາມຕ້ອງການທີ່ທ່ານຕ້ອງການໃຫ້ພວກເຂົາປາກົດຢູ່ໃນເວັບໄຊໃນກໍລະນີທີ່ມີບັນຫາເຊັ່ນວ່າຕົວອັກສອນບໍ່ໄດ້ໂຫລດ. stack font ຊ່ວຍໃຫ້ຜູ້ອອກແບບສາມາດຄວບຄຸມຮູບແບບຂອງຕົວອັກສອນໃນຫນ້າເວັບໄດ້ເຖິງວ່າຄອມພິວເຕີບໍ່ມີຕົວອັກສອນເບື້ອງຕົ້ນທີ່ທ່ານເອີ້ນໃຊ້.
ສະນັ້ນການຊອກຫາແບບອັກສອນເປັນແນວໃດ? ນີ້ແມ່ນຕົວຢ່າງ:
body {font-family: Georgia, "Times New Roman", serif }ມີບາງສິ່ງບາງຢ່າງທີ່ຈະແຈ້ງຢູ່ທີ່ນີ້.
ຫນ້າທໍາອິດ, ທ່ານຈະເຫັນວ່າພວກເຮົາແຍກຕົວອັກສອນທີ່ແຕກຕ່າງກັນດ້ວຍໂຄຣມ. ລະຫວ່າງແຕ່ລະຄົນທ່ານສາມາດເພີ່ມຕົວອັກສອນຫຼາຍເທົ່າທີ່ທ່ານຕ້ອງການ, ຕາບໃດທີ່ພວກເຂົາຖືກແຍກໂດຍໂຄຣມ. ຕົວທ່ອງເວັບຈະພະຍາຍາມທີ່ຈະໂຫລດຕົວອັກສອນທໍາອິດທີ່ລະບຸກ່ອນຫນ້າ. ຖ້າວ່າບໍ່ສາມາດເຮັດວຽກໄດ້, ມັນຈະລັນເສັ້ນທີ່ພະຍາຍາມໃຫ້ຕົວອັກສອນແຕ່ລະຕົວຈົນກວ່າມັນຈະເຫັນວ່າມັນສາມາດໃຊ້ໄດ້. ໃນຕົວຢ່າງນີ້ພວກເຮົາກໍາລັງໃຊ້ໂປແກຼມປອດໄພໃນເວັບແລະ "ຈໍເຈຍ" ອາດຈະພົບເຫັນຢູ່ໃນຄອມພິວເຕີຂອງບຸກຄົນທີ່ເຂົ້າເວັບໄຊທ໌ (ຫມາຍເຫດ - ຕົວທ່ອງເວັບເບິ່ງຄອມພິວເຕີຂອງທ່ານສໍາລັບຕົວອັກສອນທີ່ກໍານົດໄວ້ໃນຫນ້າເວັບນັ້ນ, ຄອມພິວເຕີທີ່ fonts ທີ່ຈະໂຫລດມາຈາກລະບົບຂອງທ່ານ). ຖ້າສໍາລັບເຫດຜົນບາງຢ່າງທີ່ຕົວອັກສອນບໍ່ພົບ, ມັນຈະຍ້າຍລົງໄປໃນ stack ແລະລອງໃຊ້ຕົວອັກສອນທີ່ກໍານົດໄວ້ຕໍ່ໄປ.
ໃນແງ່ຂອງຕົວອັກສອນຖັດໄປ, ສັງເກດເຫັນວ່າມັນຖືກຂຽນໄວ້ໃນຖັນ. ຊື່ຂອງ "ເວລານິວໂລແມນຕິກ", ຖືກກອກຢູ່ໃນວົງຢືມຄູ່. ນີ້ແມ່ນຍ້ອນວ່າຊື່ font ມີຫລາຍຄໍາ. ຊື່ອັກສອນທີ່ມີຫລາຍກວ່າຫນຶ່ງຄໍາ (Trebuchet MS, Courier New, ແລະອື່ນໆ) ຕ້ອງມີຊື່ໃນວົງຢືມຄູ່ເພື່ອໃຫ້ຕົວທ່ອງເວັບຮູ້ວ່າຄໍາທັງຫມົດເຫຼົ່ານີ້ເປັນສ່ວນຫນຶ່ງຂອງຊື່ຫນຶ່ງ.
ສຸດທ້າຍ, ພວກເຮົາຈະສິ້ນສຸດແບບອັກສອນທີ່ມີ "serif", ເຊິ່ງເປັນການຈັດປະເພດແບບອັກສອນໂດຍທົ່ວໄປ. ໃນຕົວຢ່າງທີ່ບໍ່ຫນ້າແປກທີ່ບໍ່ມີຕົວອັກສອນທີ່ທ່ານມີຊື່ຢູ່ໃນຖັນຂອງທ່ານມີຕົວທ່ອງເວັບ, ຕົວທ່ອງເວັບຈະແທນທີ່ຈະຊອກຫາຕົວອັກສອນທີ່ຢ່າງຫນ້ອຍກໍ່ຢູ່ໃນການຈັດປະເພດທີ່ເຫມາະສົມທີ່ທ່ານໄດ້ເລືອກ. ຕົວຢ່າງເຊັ່ນຖ້າທ່ານໃຊ້ fonts sans-serif ເຊັ່ນ Arial ແລະ Verdana ກວ່າການສິ້ນສຸດແບບອັກສອນທີ່ມີການຈັດປະເພດ "sans-serif" ຢ່າງຫນ້ອຍຈະຮັກສາຕົວອັກສອນໃນຄອບຄົວທົ່ວໄປຖ້າມີບັນຫາການໂຫຼດ. ຍອມຮັບວ່າມັນຄວນຈະເປັນເລື່ອງຍາກທີ່ຕົວທ່ອງເວັບບໍ່ສາມາດຊອກຫາໃດໆຂອງໂປແກມທີ່ລະບຸໄວ້ໃນ stack ແລະແທນທີ່ຈະໃຊ້ການຈັດປະເພດທົ່ວໄປນີ້ມັນແມ່ນການປະຕິບັດທີ່ດີທີ່ສຸດທີ່ຈະປະກອບມັນຢ່າງປອດໄພເທົ່ານັ້ນ.
Font Stacks ແລະ Fonts ເວັບ
ເວັບໄຊທ໌ຕ່າງໆໃນມື້ນີ້ໃຊ້ຕົວອັກສອນເວັບໄຊທ໌ທີ່ລວມຢູ່ໃນເວັບໄຊທ໌ພ້ອມກັບຊັບພະຍາກອນອື່ນໆ (ເຊັ່ນຮູບພາບຂອງເວັບໄຊທ໌, ໄຟລ໌ Javascript, ແລະອື່ນໆ) ຫຼືເຊື່ອມໂຍງກັບສະຖານທີ່ຕົວທ່ອງເວັບທີ່ຢູ່ນອກເຊັ່ນ Google Fonts ຫຼື Typekit. ໃນຂະນະທີ່ໂປແກມເຫຼົ່ານີ້ຄວນຈະໂຫລດຍ້ອນວ່າທ່ານເຊື່ອມຕໍ່ກັບໄຟລ໌ຕົວເອງ, ທ່ານຍັງຕ້ອງການໃຊ້ font stack ເພື່ອໃຫ້ແນ່ໃຈວ່າທ່ານມີການຄວບຄຸມບາງບັນຫາທີ່ອາດເກີດຂຶ້ນ. ສິ່ງທີ່ຄ້າຍຄືກັນສໍາລັບໂປແກຼມ "ປອດໄພໃນເວັບ" ທີ່ຄວນຈະຢູ່ໃນຄອມພິວເຕີຂອງຜູ້ໃດຜູ້ຫນຶ່ງ (ສັງເກດວ່າຕົວອັກສອນທີ່ພວກເຮົາໄດ້ໃຊ້ເປັນຕົວຢ່າງໃນບົດຄວາມນີ້ລວມທັງ Arial, Verdana, Georgia ແລະ Times New Roman ແມ່ນທຸກໂປແກຼມປອດໄພທີ່ຄວນ ໃນຄອມພີວເຕີຂອງຄົນ). ເຖິງແມ່ນວ່າຄວາມເປັນໄປໄດ້ຂອງຕົວອັກສອນທີ່ຂາດຫາຍໄປແມ່ນຕ່ໍາກໍ່ຕາມ, ການກໍານົດຕົວເລກແບບອັກສອນຈະຊ່ວຍໃຫ້ ການອອກແບບແບບພິມຂອງເວັບໄຊ້ໄດ້ ໄວເທົ່າທີ່ຈະເປັນໄປໄດ້.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 8/9/17