នៅក្នុងគំនូរទ្វេមាត្រនៃកម្មវិធី JS ការប្រើប្រាស់អត្ថបទផ្សេងៗក៏មានសារសំខាន់ណាស់ដែរសំរាប់បង្ហាញនូវព័ត៌មានផ្សេងៗ មានដូចជាការផ្សាយពាណិជ្ជកម្មជាដើម។ ចំពោះរឿងនេះ យើងមានមធ្យោបាយ ២ ក្នុងការគូរគំនូរដែលជាអត្ថបទនានា។ មធ្យោបាយទីមួយគឺការប្រើប្រាស់បន្ទាត់និងខ្សែកោងក្នុងការគូររូបតួអក្សរនិមួយៗ។ វិធីមួយទៀតគឺការបញ្ចូលអត្ថបទនៃពុម្ពអក្សរទាំងឡាយ ចូលក្នុងផ្ទាំងគំនូរ canvas តែម្តង ដោយប្រើប្រាស់ក្បួនវិធីមាននៅក្នុងភាសា JS ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
នៅក្នុងកម្មវិធីខាងលើនេះ យើងសង្កេតឃើញថា ការយកពុម្ពអក្សរខ្មែរមកប្រើ ត្រូវធ្វើឡើងដោយយកពីលើ server នៃទំព័រ HTML ខាងលើ ដោយប្រើប្រាស់ link ទៅកាន់ឯកសារ css នៃបណ្តាពុម្ពអក្សរទាំងនោះ ដូចជាការសរសេរនៅលើបន្ទាត់លេខ 4 នោះស្រាប់។
មួយវិញទៀត មានបញ្ហាមួយដែលតែងតែកើតមានឡើង នៅពេលទាញយកពុម្ពអក្សរនៅលើ server មកប្រើ។ បញ្ហានោះ គឺវាបង្ករអោយមានភាពយឺតយ៉ាវ ដល់កម្មវិធី JS ទាំងឡាយ ក្នងការទទួលបានពុម្ពអក្សរយកមកប្រើការអោយបានទាន់ពេលវេលា។ ជាទ្ធផល កម្មវិធីទាំងនោះ តែងតែយកពុម្ពណាផ្សេងមកប្រើជំនួសពុម្ពអក្សរដែរយើងចង់បាន។
ដើម្បីដោះស្រាយបញ្ហានេះ ក្រុមហ៊ុន Google បានបង្កើតនូវកញ្ចប់នៃក្បួនវិធីមួយចំនួនជាភាសា JS មានឈ្មោះថា WebFontLoader ក្នុងគោលបំណងអោយកម្មវិធី JS ទាំងឡាយរង់ចាំរហូតដល់ពុម្អអក្សរត្រូវបានទាញយកមកបានចប់សព្វគ្រប់អស់សិន ទើបប្រាប់កម្មវិធីទាំងនោះ អោយចាប់ផ្តើមដំណើរការ និងយកពុម្ពអក្សរទាំងនោះទៅប្រើប្រាស់បានតាមសេចក្តីត្រូវការ។
នៅក្នុងកម្មវិធីខាងលើនេះ ការយកក្បួនខ្នាតនៅក្នុងកញ្ចប់ WebFontLoader មកប្រើ ត្រូវធ្វើឡើងនៅលើបន្ទាត់លេខ 6 ៕
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" style="width:550px;height:300px;background:black;"></canvas>
<script>
WebFont.load({
custom: {
families: ['Moul'],
urls:['fonts/fonts.css']
},
active: function(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Moul";
ctx.textAlign = "center";
ctx.fillStyle = "orange";
ctx.fillText("គំនូរទ្វេមាត្រ", canvas.width/2, canvas.height/2);
},
inactive: function(){
alert('មិនអាចទាញយកពុម្ពអក្សរបានទេ។');
}
});
</script>
</body>
</html>
នៅក្នុងកម្មវិធីខាងលើនេះ យើងសង្កេតឃើញថា ការយកពុម្ពអក្សរខ្មែរមកប្រើ ត្រូវធ្វើឡើងដោយយកពីលើ server នៃទំព័រ HTML ខាងលើ ដោយប្រើប្រាស់ link ទៅកាន់ឯកសារ css នៃបណ្តាពុម្ពអក្សរទាំងនោះ ដូចជាការសរសេរនៅលើបន្ទាត់លេខ 4 នោះស្រាប់។
មួយវិញទៀត មានបញ្ហាមួយដែលតែងតែកើតមានឡើង នៅពេលទាញយកពុម្ពអក្សរនៅលើ server មកប្រើ។ បញ្ហានោះ គឺវាបង្ករអោយមានភាពយឺតយ៉ាវ ដល់កម្មវិធី JS ទាំងឡាយ ក្នងការទទួលបានពុម្ពអក្សរយកមកប្រើការអោយបានទាន់ពេលវេលា។ ជាទ្ធផល កម្មវិធីទាំងនោះ តែងតែយកពុម្ពណាផ្សេងមកប្រើជំនួសពុម្ពអក្សរដែរយើងចង់បាន។
ដើម្បីដោះស្រាយបញ្ហានេះ ក្រុមហ៊ុន Google បានបង្កើតនូវកញ្ចប់នៃក្បួនវិធីមួយចំនួនជាភាសា JS មានឈ្មោះថា WebFontLoader ក្នុងគោលបំណងអោយកម្មវិធី JS ទាំងឡាយរង់ចាំរហូតដល់ពុម្អអក្សរត្រូវបានទាញយកមកបានចប់សព្វគ្រប់អស់សិន ទើបប្រាប់កម្មវិធីទាំងនោះ អោយចាប់ផ្តើមដំណើរការ និងយកពុម្ពអក្សរទាំងនោះទៅប្រើប្រាស់បានតាមសេចក្តីត្រូវការ។
នៅក្នុងកម្មវិធីខាងលើនេះ ការយកក្បួនខ្នាតនៅក្នុងកញ្ចប់ WebFontLoader មកប្រើ ត្រូវធ្វើឡើងនៅលើបន្ទាត់លេខ 6 ៕
