כיצד להשתמש בצורה הטובה ביותר בגופנים ב- CSS?

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

• גופנים ב- CSS
• תכונות בגופן CSS
• מאפיין בסגנון גופן
• מאפיין משקל גופן
• מאפיין בגודל גופן
• מאפיין גופן-משפחתי

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

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

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

להדרכה מקיפה של CSS, בקרו ב- Edureka CSS Tutorial למתחילים. תקבל יתרון מעולה לדרך שבה ניתן להשתמש ב- CSS להגדלת עיצוב אתרי HTML.

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

גופנים ב- CSS

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

דוגמה 1: כותרות ופסקה בגופנים שונים

גוף {רקע-צבע: אור כחול} h1 {font: מודגש 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
הפסקה בגופן ג'ורג'יה מודגש נטוי
 

 דוגמה 1: פלט 

בדוגמה 1 יש לנו 3 שורות טקסט שונות בגופנים שונים. היית מבחין כי כל אחד מהגופנים משתנה ברוחב האופי, הכניסה וכו '.

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

כיצד להגדיר מסלול כיתה בג'אווה בחלונות 10

תכונות בגופן CSS

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

בדוגמה 1 השתמשנו בשמות גופנים שונים עבור הכותרות והפסקה. מתחת לתגי h1 ו- p, אנו רואים שני שמות גופנים, ואילו תגיות h2 שמות גופן אחד בלבד. זו ההגדרה של משפחת פונטים, עוד על כך בהמשך.

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

הוא מערך אובייקט בג'אווה

מאפיין בסגנון גופן:

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

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

מאפיין משקל גופן:

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

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

מאפיין בגודל גופן:

ניתן להגדיר את מאפיין הגודל במספר דרכים. בואו לרשום דרכים אלה בהמשך.
● ערך מונה כגון 'בינוני', 'גדול'. למעשה בדיוק כמו מידות בגדים, הערכים יכולים לנוע בין XX קטן ל- XX גדול!
● הגדר יחסית לאלמנט האב שלו, כ'גדול יותר 'או' קטן יותר '.
● אחוז מגודל האלמנט ההורי.
● הגדר כ'ירושה 'כדי לאמץ ישירות את גודל האלמנט ההורי.
● כערך מוחלט ביחידות px (פיקסלים), pt (נקודות) או ס'מ (ס'מ)
'בינוני' הוא ערך ברירת המחדל שנקבע לפרמטר זה.

ממשיך הלאה עם מאמר זה על גופנים ב- CSS

מאפיין גופן-משפחתי:

ב- HTML, משפחת הגופנים CSS מיועדת לקביעת שם הגופן. אתה יכול פשוט להוסיף שם גופן אחד עם התג. לחלופין, תוכל להקצות מספר ערכים כרשימת משפחת גופנים המגדירה את העדיפות שבה הדפדפן צריך לבחור את הגופן.
עדיפות לרשימה היא משמאל לימין, בצורה של מערכת נפילה. הערך הראשון אם זמין נבחר, או השליטה עוברת לערך הבא, עד שמגיעים לסוף הרשימה. משפחת הגופנים המוגדרת כברירת מחדל מוגדרת על ידי העדפות הדפדפן.
משפחות גופני CSS הן משני סוגים - משפחות גנריות ומשפחות גופנים.
● משפחות גנריות - בהתבסס על כמה מאפיינים כלליים, גופנים מקובצים כ- 'serif', 'sans serif', 'monospace' וכו '. לדוגמא, Sans serif פירושו גופנים ללא סגנון serif.
● שמות משפחה - גופנים השייכים להיררכיות משפחתיות ספציפיות. טיימס, אריל, שליח הם כולם משפחות פונטים וטיימס ניו רומן הוא דוגמא לגופן של משפחת טיימס.
אפשרויות השימוש השונות במשפחת הגופנים מפורטות בדוגמה 4 להלן.

מיון מערך c ++ עולה

כמה נקודות נפוצות שיש לציין

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

מקווה שמצאת את המידע שחיפשת על Fonts In CSS. שתף אותנו בחוויה שלך בסעיף ההערות למטה. עיצוב שמח!

אם אתה מעוניין ללמוד עוד על פיתוח אתרים, עיין ב מאת אדוריקה. הדרכת הסמכת בניית אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- API של Google ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).