ເນື້ອຫາ
ພວກເຮົາທຸກຄົນສາມາດຕົກລົງກັນໄດ້ວ່າຕົວອັກສອນເວັບທີ່ສາມາດຝັງໄດ້ແມ່ນ ໜຶ່ງ ໃນຄວາມກ້າວ ໜ້າ ທີ່ໃຫຍ່ທີ່ສຸດ ສຳ ລັບການອອກແບບໃນເວບໄຊທ໌ຕັ້ງແຕ່ເລີ່ມຕົ້ນ, ໂດຍສະເພາະໃນອາຍຸຂອງການອອກແບບເວັບຕອບສະ ໜອງ. ໂດຍມີສ່ວນປະກອບຫຼາຍຢ່າງທີ່ຍ້າຍແລະປ່ຽນຈາກຂະ ໜາດ ໜ້າ ຈໍໄປຫາອັນດັບຕໍ່ໄປ, ການພິມທີ່ດີເລີດແລະຮູບແບບປະເພດທີ່ແຕກຕ່າງກັນແມ່ນ ໜຶ່ງ ໃນຄົງທີ່ທີ່ເຮັດວຽກໄດ້ເທົ່າທຽມກັນໃນທຸກໆອຸປະກອນ (ຍົກເວັ້ນອຸປະກອນທີ່ໃຊ້ໂປແກຼມ Opera Mini).
ພຽງແຕ່ເພີ່ມຕົວອັກສອນເວັບແມ່ນສ່ວນ ໜຶ່ງ ຂອງບົດເລື່ອງ. ຄຳ ເວົ້າອາດມີຄວາມ ໝາຍ, ແຕ່ຕົວອັກສອນມີຄວາມຮູ້ສຶກ. OpenType (OT) ແມ່ນຮູບແບບເອກະສານຕົວອັກສອນຂ້າມແບບທີ່ພັດທະນາໂດຍ Adobe ແລະ Microsoft. ຄຸນລັກສະນະຂອງມັນເພີ່ມຄວາມເລິກແລະຄວາມຫຼາກຫຼາຍຫຼາຍຂຶ້ນໂດຍການຂະຫຍາຍຊຸດຕົວລະຄອນຂອງເຄື່ອງພິມທີ່ສາມາດເປີດໃຊ້ໄດ້ OT ເພື່ອປະກອບມີຄວາມຫຼົງໄຫຼໃນປະເພດເຊັ່ນ: ເສັ້ນສາຍ, ສາຍ, ສາຍສະຫຼັບແລະສະໄຕທີ່ແທ້ຈິງ. ຂະຫຍາຍ ຄຳ ສັບທາງດ້ານອາລົມຂອງທ່ານໂດຍການຄົ້ນຫາຄຸນລັກສະນະທີ່ ໜ້າ ອັດສະຈັນທັງ ໝົດ ນີ້; ບໍ່ມີເຫດຜົນທີ່ຈະຢຸດພຽງແຕ່ລັກສະນະແບບນີ້.
ຕິດຕາມເບິ່ງ ໜ້າ ຈໍສະເພາະຂອງບົດແນະ ນຳ ນີ້:
ພຽງແຕ່ສິ່ງທີ່ງາມທັງ ໝົດ ເຫຼົ່ານີ້ແມ່ນຫຍັງ? ດີ, ສຳ ລັບຜູ້ເລີ່ມຕົ້ນມີເສັ້ນພັນ (ລວມທັງແນວພັນຕາມມາດຕະຖານ, ຄວາມຕ້ອງການແລະສະພາບການ). ເຫຼົ່ານີ້ແມ່ນຕົວອັກສອນປະສົມທີ່ປະຫວັດສາດມີແນວໂນ້ມທີ່ຈະປະສົມເຂົ້າກັນໃນເວລາແຕ້ມຫຼືຕັດ, ເຊັ່ນ: ff, ffl, fi ຫຼື fj. ທາງດ້ານເທັກນິກ, ນີ້ແມ່ນເວລາທີ່ 'hood' ຂອງ f ແມ່ນບວກກັບ 'tittle' ຂອງໂຕນ້ອຍຫຼື i, j, ແຕ່ທ່ານສາມາດເຫັນໄດ້ວ່າມັນອາດຈະເປັນການຍາກທີ່ຈະຮັກສາໃບ ໜ້າ ຊື່ໆໃນເວລາສົນທະນາຫົວຂໍ້.
ໜຶ່ງ ໃນຄວາມໂປດປານຂອງຂ້ອຍເອງແມ່ນສາຍພັນທີ່ມັກພົບເລື້ອຍ ສຳ ລັບ ct ແລະ st ທີ່ເຫັນໃນ Adobe Caslon Pro, ແລະອື່ນໆ. ຫຼັງຈາກນັ້ນກໍ່ມີການຖີ້ມ, ຄືກັບສິ່ງທີ່ພົບເຫັນຢູ່ໃນ Fairbank (ສະແດງໃນການ ນຳ ໃຊ້ຈາກ Fonts.com): ເຄື່ອງປະດັບແລະເຄື່ອງປະດັບທີ່ ໜ້າ ຮັກເຊິ່ງເພີ່ມລັກສະນະທີ່ແຕກຕ່າງແທ້ໆໃນເວລາ ນຳ ໃຊ້ເຂົ້າໃນການ ນຳ ໃຊ້ທີ່ດີ.
ລັກສະນະ ທຳ ມະດາອື່ນໆປະກອບມີຕົວເລືອກແບບສະໄຕແລະຕົວເລືອກຕ່າງໆ ສຳ ລັບຕົວເລກ, ລວມທັງຕົວເລກຕາຕະລາງ (ສະຖານທີ່ທີ່ ເໝາະ ສົມແລະສົມບູນແບບ ສຳ ລັບຕາຕະລາງການເງິນ), ສ່ວນທີ່ແຕກຕ່າງ, ຕົວເລກ oldstyle (ມີທັງຜູ້ສະ ໜັບ ສະ ໜູນ ແລະລູກຫລານໃຫ້ ເໝາະ ສົມກັບຕົວອັກສອນໃຫຍ່ແລະນ້ອຍ) ແລະແນ່ນອນ, kerning ຕາຕະລາງ. (ສິ່ງດຽວນີ້ອາດຈະຄຸ້ມຄ່າກັບການເປີດປະຕູຮັບ, ດັ່ງທີ່ຂ້ອຍເຄີຍຮູ້ສຶກວ່າຕົວທ່ອງເວັບມີແນວໂນ້ມທີ່ຈະເຮັດວຽກທີ່ບໍ່ສະດວກສະບາຍຂອງປະເພດສະແດງໃນ ໜ້າ ຈໍ.)
- ດາວໂຫລດ ໜ້າ ຕົວຢ່າງເຊິ່ງປະກອບມີ ຄຳ ແນະ ນຳ ແລະເຄັດລັບທີ່ທ່ານສາມາດລອງໃຊ້ໃນໂຄງການຂອງທ່ານເອງ.
ນ້ອຍຂອງ backstory
ບັນດາຕົວລະຄອນແລະຄຸນລັກສະນະເຫຼົ່ານີ້ມີມາຕັ້ງແຕ່ຫຼາຍສະຕະວັດ, ແຕ່ເມື່ອບໍ່ດົນມານີ້ພວກມັນສາມາດໃຊ້ໄດ້ໃນເວັບ. ໜັງ ສືໃບລານໄດ້ຖືກເຫັນເປັນຄັ້ງ ທຳ ອິດໃນ ໜັງ ສືໃບລານ Sumerian ແລະມີຫຼາຍຮູບແບບການຂຽນແລະຂຽນຕາມຫຼັງ. ດ້ວຍການມາເຖິງຂອງປະເພດທີ່ສາມາດເຄື່ອນຍ້າຍໄດ້, ເສັ້ນໃຍຕ່າງໆໄດ້ຖືກ ນຳ ໃຊ້ເພື່ອປັບປຸງຕົວອັກສອນເພື່ອໃຫ້ໄລຍະຫ່າງແຫນ້ນກ່ວາທ່ອນໄມ້ຊະນິດອື່ນ. ຫຼາຍລັກສະນະເຫຼົ່ານີ້ໄດ້ຫຼຸດອອກຈາກຄວາມໂປດປານກັບການມາເຖິງຂອງຮູບ - ແລະຫຼັງຈາກນັ້ນການຈັດປະເພດຄອມພິວເຕີ້. ມັນເປັນພຽງແຕ່ໃນຊຸມປີມໍ່ໆມານີ້ທີ່ຮູບແບບຕົວອັກສອນທີ່ດີກວ່າໄດ້ເຮັດໃຫ້ພວກເຂົາມີອີກ, ແລະການ ນຳ ໃຊ້ມັນໄດ້ເພີ່ມຂື້ນ.
ດ້ວຍການມາເຖິງຂອງ OpenType (ຫຼືຖືກຕ້ອງຫຼາຍກວ່າແບບ Open Font Format) ເທິງ ໜ້າ ຈໍແລະຮູບແບບຕົວ ໜັງ ສື Web Open Font (WOFF), ສຳ ລັບການ ນຳ ໃຊ້ເທິງເວັບ, ໃນທີ່ສຸດມີຮູບແບບຕົວອັກສອນຄູ່ທີ່ສາມາດ ນຳ ໃຊ້ໄດ້ເກືອບທົ່ວໂລກ. ຄວາມ ສຳ ຄັນຢູ່ທີ່ນີ້ແມ່ນຮູບແບບເຫລົ່ານີ້ສະ ໜັບ ສະ ໜູນ ຕົວອັກສອນແລະຄຸນລັກສະນະທີ່ກວ້າງຂວາງກວ່າເກົ່າ ສຳ ລັບການຄວບຄຸມການພິມດີດດີກ່ວາເກົ່າ. ເຊັ່ນດຽວກັບທຸກຢ່າງໃນເວັບ, ການ ນຳ ໃຊ້ຄຸນລັກສະນະເຫຼົ່ານີ້ແມ່ນໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນລະດັບແຕກຕ່າງກັນໃນທຸກໆໂປແກຼມທ່ອງເວັບທີ່ ສຳ ຄັນ, ແຕ່ດຽວນີ້ມັນມີພຽງພໍ ສຳ ລັບການພິຈາລະນາແລະ ນຳ ໃຊ້ຢ່າງຈິງຈັງ.
CSS ທີ່ຕ້ອງການແມ່ນມີມາເປັນເວລາສອງສາມປີແລ້ວ, ແລະເປັນສ່ວນ ໜຶ່ງ ຂອງໂມດູນປະເພດ CSS3. ແຕ່ໂຊກບໍ່ດີ, ມັນມີຄວາມຄືບ ໜ້າ ຊ້າທີ່ຈະໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຢ່າງພຽງພໍ ສຳ ລັບຮູບແບບ WOFF, ສະນັ້ນມັນປະຕິບັດຕາມວ່າການຈັດຕັ້ງປະຕິບັດແລະການສະ ໜັບ ສະ ໜູນ ຂອງຕົວທ່ອງເວັບກໍ່ໄດ້ມີການພັດທະນາຢ່າງຊ້າໆເຊັ່ນກັນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ມັນຄວນຈະຮັບຮູ້ວ່າທຸກໆຕົວທ່ອງເວັບຂົນສົ່ງທີ່ ສຳ ຄັນສະ ໜັບ ສະ ໜູນ ຄຸນລັກສະນະ OpenType (ຍົກເວັ້ນ Opera Mini) ທ່ານສາມາດກວດເບິ່ງວ່າການສະ ໜັບ ສະ ໜູນ ຈະຂະຫຍາຍອອກໄດ້ງ່າຍປານໃດທີ່ Can Can Use.
ໂຊກດີ, ເຖິງແມ່ນວ່າການສະ ໜັບ ສະ ໜູນ ແລະ syntax ແຕກຕ່າງກັນ, ເຄື່ອງມືເຊັ່ນ Sass ສາມາດຊ່ວຍເຮັດໃຫ້ມີປະຕິບັດຕົວຈິງຫຼາຍຂື້ນໃນການທົດລອງໃຊ້, ແລະຖ້າ syntax ບໍ່ເຮັດວຽກຫຼືຄຸນລັກສະນະບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ, ຜູ້ໃຊ້ພຽງແຕ່ຈົບຂໍ້ຄວາມ ທຳ ມະດາ. ແນ່ນອນ, ມັນມີສະ ເໝີ; ການເປີດໃຊ້ຄຸນນະສົມບັດ OpenType ຈະຊ່ວຍເພີ່ມຂະ ໜາດ ຂອງເອກະສານ, ແຕ່ວ່າດ້ວຍຄວາມລະມັດລະວັງແລະການເກັບຂໍ້ມູນມັນບໍ່ ຈຳ ເປັນຕ້ອງເປັນນັກປະຕິບັດງານ.
ສະນັ້ນເປັນຫຍັງຈຶ່ງລົບກວນ?
ການອອກແບບແມ່ນກ່ຽວກັບການສື່ສານແລະປະຊາຊົນຕັດສິນໃຈກ່ຽວກັບການ ນຳ ໃຊ້ໂດຍອີງໃສ່ຄວາມງາມ.ສະນັ້ນມັນເປັນ ໜ້າ ທີ່ຂອງພວກເຮົາທີ່ຈະດຶງເອົາທຸກໆການຢຸດການສື່ສານກັບການເລືອກພິມຂອງພວກເຮົາ. ຍິ່ງໄປກວ່ານັ້ນ, ທ່ານຕ້ອງຈື່ພວກເຮົາອ່ານໂດຍການສະແກນກຸ່ມຂອງຮູບ, ບໍ່ແມ່ນຕົວອັກສອນແຕ່ລະຕົວ. ສະນັ້ນກະແສການໄຫລວຽນຂອງທ່ານລຽບງ່າຍ, ແລະງ່າຍຕໍ່ການເຂົ້າໃຈກຸ່ມຈົດ ໝາຍ ແລະເຂົ້າໃຈມັນເປັນ ຄຳ ສັບແລະປະໂຫຍກ, ຜູ້ໃຊ້ຈະເຂົ້າໃຈຂໍ້ຄວາມທີ່ທ່ານພະຍາຍາມຜ່ານໄປໄວກວ່າ, ແລະທ່ານກໍ່ຈະເຮັດແບບນີ້.
ລາຍລະອຽດ, ກະລຸນາ
ເມື່ອທ່ານມີຕົວອັກສອນທີ່ລວມຢູ່ໃນເວັບໄຊທ໌້ຂອງທ່ານທີ່ເປີດໃຊ້ຄຸນນະສົມບັດ OpenType, ການ ນຳ ໃຊ້ພວກມັນເຂົ້າໃນ CSS ຂອງທ່ານແມ່ນກົງໄປກົງມາ. syntax CSS3 ຢ່າງເປັນທາງການມີລັກສະນະດັ່ງນີ້:
p {font-feature-settings: "liga" 1, "frac" 1; }
ລະຫັດນີ້ຈະເປີດທັງສອງເສັ້ນຜູກແລະສ່ວນທີ່ເປັນມາດຕະຖານ, ຖ້າມີຄຸນລັກສະນະເຫຼົ່ານັ້ນ. ເນື່ອງຈາກການປ່ຽນແປງຂອງ syntax, ວິທີທີ່ປອດໄພກວ່າທີ່ຈະລວມເອົາພວກມັນຈະມີລັກສະນະດັ່ງນີ້:
p {-moz-font-feature-settings: "liga = 1", "frac = 1"; -moz-font-feature-settings: "liga" 1, "frac" 1; -webkit-font-feature-settings: "liga" 1, "frac" 1; -ms-font-feature-settings: "liga = 1", "frac = 1"; -o-font-feature-settings: "liga" 1, "frac" 1; font-feature-settings: "liga" 1, "frac" 1; }
ແມ່ນແລ້ວ, Firefox ຢູ່ທີ່ນີ້ສອງເທື່ອ. ນັ້ນແມ່ນຍ້ອນການປ່ຽນແປງ syntax ຢູ່ບ່ອນໃດ ໜຶ່ງ ປະມານ Firefox 14. ນີ້ແມ່ນບັນຊີລາຍຊື່ທີ່ສົມບູນກວ່າເກົ່າກ່ຽວກັບຄຸນລັກສະນະຕ່າງໆແລະວິທີການອ້າງອີງ:
- "c2sc": ໝວກ ນ້ອຍຈາກ ໝວກ
- "calt": ທາງເລືອກໃນສະພາບການ
- "clig": ຂໍ້ຜູກມັດທາງດ້ານສະພາບການ
- "dlig": ສາຍພັນທີ່ຕ້ອງການ
- "ປະຫວັດສາດ": ຕົວເລືອກລັກສະນະທາງປະຫວັດສາດ
- "hlig": ເສັ້ນທາງປະຫວັດສາດ
- "kern": ສາມາດ ນຳ ໃຊ້ຕາຕະລາງ kerning ທີ່ຝັງໄດ້
- "liga": ເສັ້ນດ່າງທົ່ວໄປ
- "nalt": ຄຳ ສັບແທນ
- "ເກືອ": ທາງເລືອກທີ່ມີສະໄຕ
- "smcp": ໝວກ ນ້ອຍ
- "ss01": ຊຸດສະໄຕສະຫຼັບ 1
- "ss02": ແບບສະໄຕສະຫຼັບ 2
- "ss03": ຊຸດສະໄຕສະຫຼັບ 3
- "ss04": ແບບສະໄຕສະຫຼັບ 4
- "ss05": ແບບສະໄຕສະຫຼັບແບບ 5
- "swsh": swashes
- "zero": slashed-zero
ຕົວເລືອກຕໍ່ໄປນີ້ຮຽກຮ້ອງໃຫ້ມີການຈັດລຽງຕາມເຫດຜົນທີ່ມີເງື່ອນໄຂ (ຢ່າງ ໜ້ອຍ ໃນໃຈຂອງທ່ານເອງ), ດັ່ງທີ່ທ່ານພຽງແຕ່ສາມາດເປີດໃຊ້ຄູ່ ໜຶ່ງ ຄູ່ນີ້ໄດ້ໃນເວລາດຽວກັນ:
- ກໍລະນີ ຈຳ ນວນ: "lnum": ຕົວເລກເສັ້ນຫຼື "onum": oldstyle numbers
- ຈຳ ນວນຊ່ອງຫວ່າງ: "pnum": ສັດສ່ວນຫຼື "tnum": ແບບຕາຕະລາງ (ສຳ ລັບແຖວແຖວຂອງຕົວເລກເຊັ່ນການເງິນ)
- ແຕ່ສ່ວນຫນຶ່ງ: "frac": ແຕ່ສ່ວນ ໜຶ່ງ ທີ່ປົກກະຕິຫຼື "afrc": ແຕ່ສ່ວນ ໜຶ່ງ ທີ່ເປັນທາງເລືອກ
ທ່ານບໍ່ຕ້ອງການທີ່ຈະຈື່ ຈຳ ທັງ ໝົດ ນັ້ນບໍ? ຖ້າທ່ານໃຊ້ Sass, ຂ້ອຍມີ Mixin ສຳ ລັບເຈົ້າ. ມັນສະ ໜອງ ບັນຊີລາຍຊື່ຂ້າງເທິງແລະເຮັດທຸກລະຫັດທີ່ຂຽນໃຫ້ທ່ານ. ສຳ ລັບລາຍຊື່ທີ່ສົມບູນກວ່າ, ລອງໃຊ້ Adobe.
ວິທີການທີ່ມີເຫດຜົນ
ທຸກໆອົງປະກອບຂອງການອອກແບບຂອງທ່ານຕ້ອງມີເຫດຜົນ, ແຕ່ມັນ ຈຳ ເປັນທີ່ຈະຕ້ອງຈື່ໄວ້ວ່າບາງຄັ້ງ, ເຫດຜົນທີ່ດີແມ່ນພຽງແຕ່ເພື່ອຄວາມງາມຫຼາຍກວ່າເກົ່າ. ແລະບໍ່ເປັນຫຍັງ. ສິ່ງທີ່ດີກ່ຽວກັບຄຸນລັກສະນະຂອງ OpenType ແມ່ນພວກມັນຈະກັບມາເປັນແບບປົກກະຕິທັງ ໝົດ ດ້ວຍຕົວມັນເອງ, ສະນັ້ນພວກເຂົາປອດໄພທີ່ຈະເພີ່ມເຂົ້າໃນການອອກແບບຂອງທ່ານ, ແລະລະດັບຂອງໂປໂລຍທີ່ພວກເຂົາເພີ່ມກໍ່ສາມາດສັງເກດໄດ້. ດ້ວຍຄວາມເອົາໃຈໃສ່ຫຼາຍກວ່າເກົ່າກ່ຽວກັບຄວາມສາມາດອ່ານໄດ້, ຄວາມ ໜາ ແໜ້ນ ຂອງ pixels ລວງແລະຄຸນນະພາບ ໜ້າ ຈໍເພີ່ມຂື້ນ, ຜູ້ໃຊ້ຫຼາຍຄົນ ກຳ ລັງອ່ານເນື້ອຫາທີ່ຍາວກວ່າ online. ນັ້ນ ໝາຍ ຄວາມວ່າຜົນປະໂຫຍດໃນການອ່ານໄດ້ຈາກຮູບແບບພິມທີ່ດີກວ່າສາມາດແປວ່າຄວາມສັດຊື່ທີ່ເພີ່ມຂຶ້ນ, ການ ນຳ ໃຊ້ທີ່ຖືກຮັບຮູ້ຫຼາຍກວ່າເກົ່າ, ແລະແມ້ກະທັ້ງຂະບວນແຫ່ຂອງເຄື່ອງ unicorns ແລະ ໝາ ນ້ອຍ (OK, ສະນັ້ນບາງທີສຸດທ້າຍແມ່ນການເວົ້າເກີນຄວາມຈິງ).
ຄຳ ເວົ້າ: Jason Pactic
ບົດຂຽນນີ້ມີຢູ່ໃນວາລະສານສຸດທິສະບັບທີ 253.
