יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
04/04/2024 18:47
בניית של חנות באינטרנט למכירה של מוצרי גיימינג, מחשבים, סלולר וציוד נלווה
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...

עיצוב גופנים - font-family, font-style, font-size, font-weight

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב גופנים - font-family, font-style, font-size, font-weight
משחק עם הגדרות font - שינוי הגדרת סוג הגופן, גודל הגופן ועיצובי גופן.

שינוי גופן ב-CSS

סוגי הגופנים הקיימים מחולקים למשפחות לפי הסגנון שלהם. המשפחות העיקריות הן:

  • Serif - גופנים שבהם בקצות האותיות יש קווים נוספים שמעטרים את הגופן, כמו למשל Times New Roman.
  • Sans-Serif - גופנים שבהם לא קיימת תוספת העיטור הנ"ל כמו למשל Arial.
  • Monoscape - גופנים שבהם כל האותיות הן בעלות רוחב זהה, כמו למשל Courier New.

פרט לשלוש משפחות אלה, קיימים פונטים רבים נוספים ואותם קובעים ב-CSS באמצעות התכונה font-family. רצוי שהערך שנכניס עבור תכונה זו יכיל יותר משם אחד של פונט. כך, במקרה שהדפדפן הספציפי לא תומך בפונט הראשון שבחרנו, הוא יציג באופן אוטומטי את אחד הפונטים הבאים שרשמנו כאן. נתחיל בפונט שבו אנו מעוניינים, ונסיים במשפחת פונטים כללית, כמו בדוגמה הבאה:

p {
    font-family:Arial, Verdana, Sans-serif;
}

שמות של פונטים המורכבים מיותר ממילה אחת ייכתבו במרכאות, כמו למשל "Courier New".

טקסט נטוי

בכדי להגדיר אם הפונט יהיה נטוי (italic) או רגיל, משתמשים בתכונה font-style. ישנן שלוש אפשרויות להכניס בערך (Value) של תכונה זו: italic, normal או oblique שהוא גם פונט נטוי. במקום שבו אנו רוצים שחלק מהטקסט יהיה נטוי, עלינו להגדיר לו ב-html מחלקה (Class) מתאימה, נניח ששמה italic, ולאחר מכן לאפיין את התכונות של מחלקה זו ב-CSS. בצורה זו, כל המקומות שבהם הוגדרה המחלקה italic יופיעו כפונט נטוי. כך זה ייראה ב-CSS:

p.italic {
    font-style:italic;
}

הגדרת גודל הפונט והדגשת פונטים

בכדי להגדיר את גודל הפונט בטקסט, משתמשים בתכונה font-size, כאשר הערך נכתב בפיקסלים.

להוספת הדגשה נשתמש בתכונה font-weight שיכולה לקבל ערכים כגון normal או bold. קיימים גם ערכים נוספים או אפשרות להכניס מספר המשקף את עובי הכתב, אבל אלו פחות נפוצים ופחות מומלצים לשימוש.

p {
    font-size:16px;
    font-weight:bold;
}

חשוב לציין כי רצוי שלא להשתמש בתכונה זו כדי לגרום לטקסט להיראות ככותרת (או להיפך), אלא להשתמש עבור כל אלמנט בתגיות המתאימות ב-html.

כיום מקובל להגדיר את גודל הפונט באופן אבסולוטי ע"י שימוש בפיקסלים px, ולא באופן רילטיבי באמצעות em. השימוש ב-em הומצא על מנת לפתור את הבעיה בדפדפן אינטרנט אקספולרר, שם לא ניתן להגדיל ולהקטין את גודל הפונט בטקסט (אלא רק בעזרת כלי הזום).

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

בניית חנות אינטרנטית של מיזם גרופ תעזור לך ביצירת סיסטם עוצמתי שמגדיל מכירות.

ההצלחה מבוססת על בניית חנות וירטואלית בחוד החנית עם הקמת מערך שיווק אפקטיבי שמגדיל חשיפה והמרות.

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: