الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

خطوط الترميز

صورة مصغرة تُظهر الخطوط المصممة للكتابة.

https://coding-fonts.css-tricks.com/

تشغيل هذا الموقع.

  • تثبيت التبعيات: npm install
  • START Server: npm run dev

إضافة خط

  • ابدأ الخادم (انظر أعلاه)
  • إذا كان الخط مفتوح المصدر ، فضع نسخة من الخط في مجلد fonts . على الأقل ملف .woff2 في مجلد من اسم الخطوط. eg /src/assets/fonts/NewFont/NewFont.woff2
  • اصنع ورقة أنماط تجعل هذا الخط جاهزًا للاستخدام في مجلد الخط. eg /src/assets/fonts/NewFont/NewFont.css
  • إضافة ملف مثل new-font.md to /src/fonts . أضف معلومات الخط. حدد عنوان URL لملاءة الأنماط من الخطوة السابقة في حقل stylesheet_url ، نسبة إلى /src/assets/fonts/ . إذا كان عنوان URL مطلقًا ، أي لم يتم إضافته إلى الريبو ، فأضف stylesheet_absolute: true . انظر هذا كمثال.
  • لمعاينة ما سيكون لقطة الشاشة ، يشبه بنية عنوان URL: http: // localhost: 8080/code_samples/html/؟ font = مجهول pro & theme = dark حيث يطابق الخط Title kebab-case لملف التولد الذي قمت بإنشائه.
  • أخذ لقطات الشاشة! هذه عملية محلية فقط. اتبع تعليمات لقطات الشاشة في سطر الأوامر.
  • تقديم طلب سحب لذلك. يجب أن تكون قادرًا على رؤية معاينة مبنية على NetLify كجزء من العلاقات العامة.

أخذ لقطات الشاشة

يمكنك التقاط لقطات شاشة باستخدام ملف takeScreenshots.js المضمون. يتم سرد الخيارات في شاشة المساعدة أدناه. 

 Options:
  --version    Show version number
  -f, --font   Font to use for screenshots
  -l, --lang   Code sample to use for screenshot
  -t, --theme  Theme to use for screenshots
  --parallel   Run the screenshots in parallel
  -h, --help   Show help

--font ، --lang ، و --theme تقبل جميع الكلمة الرئيسية "All" للتعامل مع لقطات شاشة لجميع نقاط البيانات الخاصة بكل منها.

يتيح العلم المتوازي تشغيل Puppeteer --parallel وهو أمر مفيد إذا كنت بحاجة إلى التقاط لقطات من الخط مرارًا وتكرارًا. لاحظ أن هذا سوف يولد أكبر عدد ممكن من مثيلات العرائس حيث لديك إجمالي التباديل الذي تطلبه. خذ الأمر التالي على سبيل المثال. 

 node takeScreenshots.js -f source-code-pro -l all -t all

سوف يولد 8 مثيلات العرائس (1 خط * 4 لغات * 2 موضوعات = 8 مثيلات) في وقت واحد لالتقاط لقطات الشاشة. عادة ما يكون هذا جيدًا ولا يؤدي إلى أي مشكلات ، لكن في حالة قيامك بذلك لجميع الخطوط أيضًا ، فإنك تفرخ مئات الحالات التي ستفشل دائمًا.

أمثلة إضافية 

 # Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.
node takeScreenshots.js -f source-code-pro -l js -t dark

# Take a screenshot of the Menlo font, using all of the code samples, and the light theme.
node takeScreenshots.js -f menlo -l all -t light

# Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.
node takeScreenshots.js -f all -l all -t all

# Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel
node takeScreenshots.js -f input -l all -t all --parallel
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل