الخطوط عند تحويلها من PSD الي HTML/CSS


في حالة اردت تحويل PSD او تصميم موقع الي HTML/CSS لعل قد تحتاج هذا الموضوع في ظبط الخطوط كما هي في PSD عند تحويلها الي HTML/CSS.

اولا عند فتحك لملف PSD ستجد Photoshop يطلب منك تثبيت بعض الخطوط التي يتطلبها الملف لكي تستطيع تعديل الخطوط الموجودة داخل الملف وتظهر معك علي هذا الشكل.

fonts-psd-to-html

سوف تقوم بالبحث في جوجل عن الخطوط المفقودة داخل جهازك كما في المثال السابق سوف تبحث عن JFFlat Regular .

بعد تحميلك لخطوط والتأكد انها تعمل علي فوتوشوب عن طريق تثبيتها داخل النظام ( فقط قم بالضغط علي الخط كليك يمين واختيار Install وقم باعادة تشغيل Photoshop )

سوف تحتاج بعد ذلك تحويل الخط الي ويب فونت Web Font عن طريق الموقع التالي :

web-font-generator.com

ستقوم برفع الخط وسيقوم الموقع بتحويلة ومن ثم قم بتحميله وتضمينه داخل ملف HTML لن تحتاج سوي نسخ الاكواد.

webfont

قد يأتي بعض الملفات ومضمن معها جميع الخطوط والايقونات المستخدمة وتكون جاهزة للاستخدام لن تحتاج لتحميل او تحويل اي شئ.


@font-face {
font-family: 'JFFlat-Regular';
src: url('JFFlat-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}

سوف تقوم بنسخ الخطوط كما هي في مسار Fonts , وقم بفتح ملف Css ونسخ الاكواد الخاصة بالخطوط ونقلها Css الخاص بمشروعك.

نأتي للخطوة التالية وهي التي يقع فيها الكثير عند قيامك بنسخ جملة واعطائها نفس حجم الخط تجد ان في ملف PSD اكبر او اصغر عن الموقع الذي تعمل عليه وهذا بسبب اختلاف حجم الشاشة وحجم ملف PSD ولعلاج هذة المشكلة فقط قم بعمل Screenshot للشاشة ونقلها ل Photoshop من قائمة Image اختر Image size

photoshop-resize-imge

ستجدة علي سبيل المثال Width = 1377 قم هنا بفتح ملف PSD ومن نفس القائمة اضغط علي علامة ربط بين العرض والطول وادخل عرض الشاشة الخاص بك ومن بعدها ستجد تغير الطول واضغط OK سيتم تغيير حجم ملف PSD لنفس حجم الشاشة الخاص بك.

اما بالنسبة للأوزان الخاصة بال Photoshop ونظيرها في Css يمكنك استخدام الجدول التالي :

Extra Light or Ultra Light 100
Light or Thin 200
Book or Demi 300
Normal or Regular 400
Medium 500
Semibold, Demibold 600
Bold 700
Black, Extra Bold or Heavy 800
Extra Black, Fat, Poster or Ultra Black 900

قد تجد ان الخطوط مختلفة عن تصميم بعض الشئ من نحية الحدة يمكنك استخدام :


html {
-webkit-font-smoothing: antialiased;
}