معربا عن تكنولوجيا المعلومات

أكملت CSS 10 عاما وجود هذا العام! أولئك الذين قد حول لفترة من الوقت، وكسب الخبز (أو لا) باستخدام CSS، فإنك قد ندرك كيف كنا يتضورون جوعا لمجموعة جيدة من الخطوط. حتى مع عدم وجود مثل تلك الخطوط المصممين في حديقة زن CSS جعلت استخدام الصور الخلفية المغلق لاستبدال الخطوط في السعي من أجل القيام ببعض العدالة لتصاميمهم. حاولنا أيضا فلاش / جافا سكريبت ® الخارقة لتحقيق أهداف التصميم لدينا. بأي حال من الأحوال وهذا هو الطريق الخطأ للحصول على الخطوط نرغب في تصاميم الويب الخاص بنا، ولكن بالتأكيد، ليس هذا هو الطريق الأكثر مرغوب فيه. وعلى مدى سنوات مصمم على شبكة الإنترنت، مثلي، وكانت تعتمد بشكل كامل على 10 أو نحو ذلك الخطوط لتصاميمهم.

التطورات الأخيرة في الشبكة العالمية للمعايير ونماذج الخط تجعل من الممكن تقديم نص HTML في طرز أخرى من الخطوط الافتراضية القديمة نفسها. يأتي ذلك في decleration "نوع الخط @" CSS.

@ نوع الخط provids حل لربط ملف الخط الفعلي والحصول عليه من شبكة الإنترنت. @ استخدام نوع الخط، يمكن للمصممين استخدام الخطوط دون الحاجة لتجميد النص كصور خلفية. تنفيذ مباشرة جدا الى الامام، كما هو مبين أدناه ولكن كما كل الأشياء الجيدة لديك جزء CON إليها، وليس كل المتصفحات دعم واحد "نوع الخط". إذا كنت تخطط لاستخدام @ نوع الخط في موقع مع اشتراط عبر دعم المتصفح، ثم سيكون لديك لتوفير مصادر لمختلف أنواع الخط من نفسه.

1. تروتايب - شكل مصمم لتبدو جيدة على الشاشة. وأوصت خاصة للمتصفحات ويندوز (كروم).
2. بنتيبي (CFF) - هذا الشكل هو أفضل للعمل الطباعة ولا تبدو دائما جيد على ويندوز.
3. EOT - تحتاج هذه الصيغة إذا كنت تريد استهداف برنامج Internet Explorer. سوف آي إي لا تستخدم أي شكل آخر. وستنظر محكمة تكافؤ الفرص لدينا في "لايت"، حيث يتم ضغط لا هم ولا يقتصر المجال.
4. SVG - وهذا هو تنسيق XML التي تدعمها بعض برامج التصفح بما في ذلك اي فون.
5. WOFF - وهذا عبر متصفح، على شبكة الانترنت لتنسيق الخط فقط وخفيفة الوزن (بيانات الخط البريدي مضغوط) ويمكن جمعه مع أي تروتايب أو الخطوط العريضة بوستسكريبت (CFF). معتمد حاليا من قبل فايرفوكس 3.6 +.

@ استخدام نوع الخط

  @ الخط وجه {
 الخط بين أفراد الأسرة: "CalligraphyFLFRegular '؛
 SRC: رابط ('CalligraphyFLF.eot')؛
 SRC: محلي ('CalligraphyFLF')، بالتوقيت المحلي ('CalligraphyFLF')، شكل رابط ('CalligraphyFLF.woff') ('WOFF')، عنوان ('CalligraphyFLF.ttf') شكل ('تروتايب')، عنوان ('CalligraphyFLF . SVG # CalligraphyFLF ') شكل (' SVG ')؛
 }
 @ الخط وجه {
   الخط بين أفراد الأسرة: "لديك محرف"؛
   SRC: رابط ("الخطوط / font_filename.eot")؛
   SRC: المحلي ("اسم بديل")، بالتوقيت المحلي ("Alternatename")،
     رابط ("الخطوط / font_filename.woff") شكل ("WOFF")،
     رابط ("الخطوط / font_filename.otf") شكل ("بنتيبي")،
     رابط ("الخطوط / font_filename.svg font_filename #") شكل ("SVG")؛
   }
 H2 {الخط بين أفراد الأسرة: "لديك محرف"، جورجيا، الرقيق؛} 

وكما ترون من المثال أعلاه، لتشمل محرف الخط المختار، أحد لديه لربط مجموعة من fonttypes لمحرف واحد. وبالتالي الناس تشير إليها بوصفها "مجموعة الخط".
هناك مجموعات الخط المتاحة التي تسمح صراحة ربط مع خاصية CSS الخط @ وجه إليها بموجب اتفاقية ترخيص المستخدم النهائي (EULA).

الموارد WebFont مفيدة:

• المتاحة لمواجهة الخط @ تضمين الخطوط في صفحة ويكي http://webfonts.info/wiki/index.php؟title=Main_Page
  
• شعاع Larabie . فهو مصمم الخط الشهير الذي جعل مئات من خطوط تروتايب للاهتمام متاحة بحرية للاستخدام على شبكة الإنترنت. الخطوط له أنيقة، ديكور، و لعوب.
• ديتر Steffmann آخر هو مصمم الخط كبير. هو، أيضا، حققت الخطوط الجميلة العديدة المتاحة على أي شخص استخدام.
• متجر الخط : تقدم الخطوط المصممة خصيصا للاستخدام على شبكة الإنترنت. أكثر من 30 من العائلات FontFont أنجح متاحة الآن كما FontFonts ويب. FontShop أيضا لديه دليل المستخدم WebFont مفصل http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• السنجاب الخط : يسلط الضوء على جميع الخطوط التي السنجاب الخط يقدم للاستخدام مع تضمين @ CSS الخط وجه. السنجاب الخط يوفر كمية هائلة من نوع، يجعل من القتلى بسيطة لاختيار واحد من أصل، ويقدم بشكل ملائم "مجموعات" - محرف من اختيارك، في العديد من الأشكال، وتعبئتها مع HTML و CSS التجريبي الذي يستخدم الحالية جدا @ الخط وجه بناء الجملة . كما أنها توفر وسيلة ل جعل بنفسك @ الخط وجه مجموعات . إذا كان قد تم الترخيص للمحرف الذي تريد استخدامه على النحو المناسب (تلك التي تأتي مع جهاز الكمبيوتر الخاص بك ليست بخير بالضرورة)، ومولد كهربائي ينتج EOT، SVG، ومهلا! ملفات WOFF.

مع بلدي محدود مجموعة من المهارات مع أدوات مثل Photoshop والمصور، ويمكنني أن أعترف بصراحة أن المطور أنا أفضل من أنا مصمم. لكنها كانت خلفيتي مع الأساسية (جانب الخادم) مع تطوير جافا / PHP / COBOL، له تأثير إيجابي جدا على تطوير مهاراتي واجهة المستخدم. ما أعنيه هو، في حين خلق تصاميم بلدي، وكلما أفعل أي تصميم، أفكر كيف يمكن تصميم أفضل تحويلها إلى HTML-CSS وبينما يفعل HTML، CSS، أعطي فكرة عن تكنولوجيا الخلفية وتأكد بشكل معقول ويمكن أن أتش تي أم أل تنفيذها بسهولة في الحلقات XSL أو PHP قصاصات الخ.

على مدى سنوات، ونزح أنا وجها لوجه على التصاميم من قبل مصممي واجهة المستخدم الذي ربما متأكدا لديه أدنى فكرة عما HTML أو CSS هي. كل هذه السنين لقد تم التفكير بأنني سوف يطلبون أكثر من اللازم، وإذا كنت تتوقع فقط المصمم، الذي يحاول shov له "من المستحيل على رمز" تصميم أسفل رقبتي، ولكي نفهم قليلا ما سيتم تحويل تصميمه في. وسيساعد ذلك الحق؟

ثم، جئت عبر هذا المنصب اليوم ... مصممي الويب الذين لا يستطيعون رمز ... شكرا يا رب! أنا مجرد واحدة من العديد من الذين يشعرون نفس الشيء ... وartitle أعلاه هو قليلا ينضب طويل .. لكن جديرة بالقراءة، كل كلمة منه.

تشكر إليوت الأسهم جاي ... أشعر بالارتياح!

هنا بعض مقتطفات من مقالة Elliots .

نجاح باهر، ما في اليوم! بدأت مع واحد سقسقة قليلا وانتهت المناقشة التي بدت تغزو المجتمع عبر الانترنت وتصميم كامل. يبدو أن هناك بعض الآراء القوية جدا التي عقدت حول هذا الموضوع سواء من مصممي المواقع الإلكترونية ينبغي أن تكون قادرة على رمز.
...
لذلك، قبل أن نصل إلى هذا، اسمحوا لي أن خلاصة بسرعة ما قلته في هذا الصباح على تويتر:

بصراحة، أنا مصدوم أنه في عام 2010 انا قادم لا يزال عبر "مصممي المواقع الإلكترونية" الذين لا يستطيعون رمز تصاميمهم الخاصة. أي عذر.

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

نحصل على "الويب" تصاميم أرسلت في المصور، 300DPI، من المستحيل رمز، لا اتساق / قابليتها للاستخدام.
~ آمي ماهون

انها تحصل في وقت متأخر، وأنا قد حصلت على الانتهاء من هذه العملية بطريقة أو بأخرى. وأنا أعلم أنه سيكون هناك العديد من الذين يختلفون معي، وليس في نيتي الإساءة إلى أي شخص أو منزعج الذين لا يستطيعون رمز، ولكن آمل أن بعض ما قلته يعكس بعض النقاط التي تأتي دائما حتى عندما الخوض هذه المناقشة.

في نهاية اليوم، وأنا لا يفقد أي من النوم أكثر من الذين يمكن أن الرمز والذين لا يستطيعون. أنا حقا مندهش فقط للعثور على العديد من المصممين بحيث تفتقر إلى الواجهة الأمامية المهارات، وظننت ان هذا كان شيئا من الماضي.

أيضا قراءة التعليقات، وكان هناك نحو 320 تعليق، وأنا أكتب ... فهي تستحق القراءة.
يرجى قراءة كاملة وظيفة Elliots هنا .. مصممي الويب الذين لا يستطيعون رمز

منذ زر والنص هي مضمنة، وبالتالي فإن النص سوف ينضم إلى الجزء السفلي من زر الراديو، وسيكون النص على ما يبدو قليلا تحت زر الراديو.
إذا كنت تريد هذه لمحاذاة إلى الأعلى، سيكون لديك لوضع الراديو والنص في حاويات منفصلة مثل divs أو يمتد (عند الاقتضاء)، وأنها سوف تأخذ الرعاية من المحاذاة. سيكون من الأسهل لاستخدام خلايا الجدول أيضا، من موجز التصميم الخاص بك يسمح بذلك.

وهذا لن ننظر نفسه في كل متصفح، كما يعرض كل متصفح لاسلكي بشكل مختلف قليلا، لذلك هناك دائما ما يكون حجم القضايا بغض النظر عن ما تفعله.