גודל הגופן מצוין על ידי תכונת התג. איך לעשות פונט יפה ב-html: גדלים, צבעים, תגיות פונטים ב-html. שינוי גודל הגופן בעת ​​עיצוב כותרות

17.07.2020

תיאור

מגדיר את גודל הגופן של האלמנט. ניתן להגדיר את הגודל בכמה דרכים. קבוצה של קבועים (xx-small, x-small, small, medium, large, x-large, xx-large) מציינת את הגודל, שנקרא מוחלט. למען האמת, הם לא לגמרי מוחלטים, מכיוון שהם תלויים בהגדרות הדפדפן ובמערכת ההפעלה.

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

בסופו של דבר, גודל הגופן תלוי במידה רבה בערך של מאפיין גודל הגופן של האב של האלמנט.

גודל הגופן עצמו מוגדר כגובה מקו הבסיס לראש הסיכה, כפי שמוצג באיור. 1.

אורז. 1. גודל גופן

תחביר

גודל גופן: גודל מוחלט | גודל יחסי | משמעות | ריבית | לָרֶשֶׁת

ערכים

כדי להגדיר את הגודל המוחלט, נעשה שימוש בערכים הבאים: xx-small, x-small, small, medium, large, x-large, xx-large. ההתכתבות שלהם עם גודל הגופן ב-HTML מובאת בטבלה. 1.

גודל הגופן היחסי מצוין על ידי הערכים גדולים וקטן יותר.

מותר גם להשתמש בכל יחידות CSS חוקיות: em (גובה גופן אלמנט), ex (גובה תווים x), נקודות (pt), פיקסלים (px), אחוזים (%) וכו'. גודל הגופן של אלמנט האב הוא נלקח כ-100%. ערכים שליליים אינם מותרים.

יורש יורש את ערך ההורה.

HTML5 CSS2.1 IE Cr Op Sa Fx

גודל גופן

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



תוֹצָאָה הדוגמה הזומוצג באיור. 1.

אורז. 2. שימוש במאפיין font-size

דגם אובייקט

document.getElementById("elementID ").style.fontSize

דפדפנים

גרסאות Internet Explorer עד וכולל 7.0 אינן תומכות בערך הירושה.

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

  • HTML
  • CSS
    • מבוא
    • סוגי מסמכים
    • סוגי סגנון
  • PHP
אבל באמת התכוונתי לזה: שימוש ברשימות.
    פוטושופ
  • HTML
  • RNR

הָהֵן. בעתיד אתה צריך להבין שאת כל התגים שאני מדגים עליך להכניס לתבנית HTML הראשית בין התגים ו

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

כעת נחזור לנושא שלנו.

על מנת לשנות את הגודל, הגופן או הצבע של הטקסט של קטע נפרד ב-HTML, יש תג קונטיינר קטע טקסט נפרד

נתחיל לפי הסדר ונלמד כיצד לשנות את צבע הטקסט של קטע נפרד, לשם כך בתגית גוֹפָןצריך להציב תכונה צֶבַעככה:

color="אדום"> קטע טקסט נפרדערכי תכונה צֶבַעזהה לתכונות הטקסט bgcolor של תג הגוף, כלומר, אנו יכולים לציין אותן עם מילים באנגלית (שחור, ירוק, כסף, ליים, אפור, זית, לבן, צהוב, חום, חיל הים, אדום, כחול, סגול, צהבהב , פוקסיה, אקווה) או מספרי צבע ב-RGB (#000000- #FFFFFF)

face="Tahoma"> קטע טקסט נפרדגופנים משמשים כדי להפוך את הטקסט למראה יותר יוצא דופן, אבל יש בעיה אחת, הגופנים שיש לך (תוכל לראות אותם ב-C:WINDOWSFonts) אולי לא יהיו זמינים למבקרים שלך, הבעיה השנייה עם גופנים היא שחלק מהגופנים ניתן להשתמש רק בקירילי (אותיות רוסיות) או להיפך רק עם האלפבית הלטיני (אותיות באנגלית), יש כמובן סוג שלישי שמתאים גם לאלפבית הלטיני וגם לאלפבית הקירילי. ברשימה התחתונה אראה אילו גופנים הם סטנדרטיים וזמינים בכל המחשבים ומתאימים גם לכל אותיות:

  • אריאל
  • Cosmic Sans
  • שָׁלִיחַ
  • גארמונד
  • Helvetica
  • ורדנה
  • טהומה
  • פִּי
  • Times New Roman
אתה יכול לציין מספר גופנים בו-זמנית: face="Tahoma, Times, Verdana"> קטע טקסט נפרד
מהקוד הזה אני רוצה לציין את הדברים הבאים: אם למבקר שלך אין את הגופן טהומה, אז הטקסט יסופק בגופן פִּי, ואם אין Times, אז הטקסט יהיה Times New Roman. ובכן, אם הגופן הזה לא קיים, אז גופן ברירת המחדל של הדפדפן.

כעת נעבור לגדלים, ניתן לשנות את גודל הטקסט ב-HTML באמצעות שתי תגיות גוֹפָןו/או BASEFONT.
בוא נתחיל עם BASEFONT, תג זה משמש לשינוי צבע הבסיס, הגופן והגודל של הטקסט, לדוגמה:
....טֶקסט....
תג זה אינו מיכל, כלומר. אין לו תג אחורי. הצבע והגופן של הטקסט מוגדרים כמו בתג גוֹפָן, אבל כדי לשנות את גודל הטקסט נעשה שימוש בתכונה גודלעם ערך מ-1 עד 7. ניתן להשתמש בתג זה מספר פעמים בטקסט: size="4">....טקסט....
size="6">....טקסט....
size="3">....טקסט....
כברירת מחדל, גודל טקסט = "3", לא ניתן לציין גודל זה. בדוגמה הראשונה הגדלנו את הטקסט באחד, בשורה השנייה הגדלנו אותו ל-"6", ובשלישית החזרנו אותו שוב לטקסט ברירת המחדל.
עכשיו אני רוצה לאכזב אתכם, התג הזה הוצג בגרסת HTML-4.01, ובהתאם לכך, רק Internet Explorer נתמך בדפדפן, דפדפנים אחרים פשוט מתעלמים ממנו, אז עדיף לא להשתמש בתג הזה בכלל!!!
והשתמש רק בתג FONT עם מאפיין SIZEזה נתמך על ידי כמעט כל הדפדפנים. מאפיין SIZE, לוקח גם ערכים מ-1 עד 7, אך ניתן לציין גדלים אלה גם מ-"-2" עד "+4"
טֶקסט
טֶקסט
טֶקסט
טֶקסט
טֶקסט
טֶקסט
טֶקסט
תג FONT, כמו BASEFONT, יכול להכיל מספר תכונות:
size="5" color="red" fase="Thoma, Times, Verdana">.... טקסט....

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

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

גופנים שונים

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

  • Helvetica;
  • Futura;
  • גארמונד;
  • בודוני;
  • במבו;
  • רוקוול;
  • Times New Roman.

ההבדלים העיקריים ביניהם נעוצים ביחסיהם למשפחות מסוימות. ישנן משפחות סריף (סריף), sans serif, דקורטיבי, נטוי ומונוספייס.

אני גם רוצה להדגיש שיש 5 גדלי גופנים.

נתחיל בשפת ה-html וב"יכולות היצירתיות" שלה

עיצוב טקסט באמצעות תגי html

שֵׁם ראשוןכּוֹתֶרֶת

פכתובית עם אות אדומה!

כאן ממוקם ראשוןפסקה נוֹכְחִידוגמא. למען הבהירות המילים האלהייכתב באותיות נטוי.



תן לי להזכיר לך שהתכונה יישר = "מֶרְכָּז"מגדיר את הטקסט שיוצג במרכז.

ועכשיו הגיע הזמן ש-CSS יציג את כישוריו

למרות מכלול התגים השונים שמספק html, css הוא כלי נוח וגמיש יותר לעיצוב מראה גופנים.

המאפיינים העיקריים המשמשים לעיצוב תוכן הם: גוֹפָןומרכיביו: טקסט-קישוט.

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

שם הנכס מילות מפתח
משפחת גופן ניתן להתקין כמשפחות גופנים סטנדרטיות:

· ללא סריף (סנס-סריף);

· עתיק (סריף);

· דקורטיבי (פנטזיה);

· נטוי (כתבתי);

· מונוספייס (מונוספייס),

כך גם הסגנונות הקיימים הסטנדרטיים (Arial, Calibri וכו').
גודל גופן כדי להגדיר את הגודל המוחלט של סמלים, נעשה שימוש בסימון הבא: xx-small, x-small, small, medium, large, x-large, xx-large. ניתן גם לציין ערך ייחודי.
משקל גופן אחראי על הרוויה של סגנון הטקסט. משתנה בטווח או מצוין באמצעות המילים רגיל, מודגש, בהיר או מודגש יותר.
וריאנט גופן מציין את הייצוג של אותיות באמצעות מילות מפתח: כובע קטן, רגיל או בירושה.
סיגנון גופן מגדיר נורמלי, אלכסוני, נטוי או יורש אב.
גופן-מתיחה מציין את צפיפות האותיות. ניתן לציין את הערכים הבאים: אולטרה-מעובה, אולטרה-מורחב, מרוכז במיוחד, מורחב במיוחד, חצי-מעובה, חצי-מורחב, רגיל, מורחב, מרוכז וירושה.

תכונה טקסט-קישוטעוזר לקשט טקסט עם אלמנטים נוספים כגון קו תחתון ( לָשִׂים דָגֵשׁ), חוצה ( קו דרך), קו-על ( קו-על), וגם יורש את הפרמטרים של האב ( לָרֶשֶׁת) או בטל את כל הרישום ( אף אחד).

עכשיו הגיע הזמן לדוגמא השנייה. לקחתי את הקוד הקודם וסיגנתי אותו באמצעות css. אז, הכותרת עוטרה בצל (באמצעות הנכס טֶקסט-צֵל) ועם קו מתאר מסביב ( גבול-צֶבַע). במקביל, הגדלתי מילה אחת. רציתי גם להשתמש בפרמטר אֲטִימוּתכדי להגדיר את השקיפות של הכתובית.

עיצוב טקסט באמצעות <a href="https://svd-komi.ru/iw/to-install-on-your-computer/fonovyi-blok-div-imeet-otstupy-kak-sdelat-otstupy-v-css-rasshirennye-vozmozhnosti/">מאפייני css</a>

שֵׁם ראשוןכּוֹתֶרֶת

כתובית שקופה!

כאן ממוקם ראשוןפסקה נוֹכְחִידוגמא. למען הבהירות המילים האלהייכתב באותיות נטוי.



או למד תגיות המעצבות טקסט HTML

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

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

ראה למטה תגים המעצבים טקסט HTML:

  • תגים → מודגש טקסט HTML(גופן מודגש).
  • תגיות → מודגשות טקסט HTML(גופן מודגש).
  • תגים → מונוספייס טקסט HTML(גופן מונוספייס).
  • תגים → מונוספייס טקסט HTML(גופן מונוספייס).
  • תגים → מונוספייס טקסט HTML(גופן מונוספייס).
  • תגים → טקסט HTML, גודל גדול מהרגיל (גופן גדול).
  • תגים → טקסט HTML, הגודל קטן מהרגיל (גופן קטן).
  • תגים → אלכסוני טקסט HTML(גופן נטוי).
  • תגים → אלכסוני טקסט HTML(גופן נטוי).
  • תגים → אלכסוני טקסט HTML(גופן נטוי).
  • תגים → עם קו תחתון טקסט HTML(גופן עם קו תחתון).
  • תגים → מחוצה החוצה טקסט HTML(גופן מחוצה).
  • תגים → טקסט HTML(גופן) בכתב מנוי.
  • תגים → טקסט HTML(גופן) בכתב עילי.

עיצוב טקסט HTML: טקסט חוצה, קו תחתון

תוצאה: ... גופן מונוספייס

תוצאה: ...גודל הגופן גדול מהרגיל

תוֹצָאָה: ... גופן נטוי

תוצאה: טקסט חוצה (גופן חוצה)

תוצאה: כתב עילי

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

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

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


<НЕАD><ТIТLЕ>סגנונות פיזיים

<В>נוֹעָז
אוֹתִיוֹת מוּטוֹת
לחוץ
מוחק
<ТТ>מְכוֹנַת כְּתִיבָה
<ВХ1>מודגש נטוי
<ВХ1><и>קו נטוי מודגש

אורז. 649. סגנונות פיזיים

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


<НЕАD><ТIТLЕ>סגנונות פיזיים ולוגיים

<Н2>זה - שונהכותרת רמה 2

אורז. 650. שינוי סגנון הגופן של חלק מהכותרת

על ידי שימוש ב תג מיוחד אתה יכול להתאים אישית את הגופן עבור תמונות טקסט: הגדר את הגופן, הגודל והצבע. קודם כל, ניתן להגדיר את גודל הגופן הראשי המשמש במסמך כברירת מחדל. לתג הגופן הראשי יש את הפורמט . ניתן להגדיר את גודל הגופן הראשי מ-1 עד 7. אם אינך משתמש בתג זה, גודל הגופן הראשי המוגדר כברירת מחדל מוגדר ל-3.
תָג מגדיר את גודל הגופן הנוכחי עבור קטעי טקסט בודדים. תג זה אינו משפיע על סגנונות. טווח הערכים האפשריים הוא מ-1 עד 7. תג זה גם מאפשר לך לשלוט בגודל הגופן הנוכחי ביחס לראשי. לשם כך, השתמש בסמל + (כדי להגדיל) ובסמל - (כדי להקטין) את גודל הגופן בכמות נתונה. לדוגמה, אם גודל גופן הגוף מוגדר ל-3, אז התג מגדיר את גודל הגופן הנוכחי ל-5.
כדי להגדיר את הגופן, השתמש בתג . לדוגמה:

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

FACE="Arial, Sans Serif, Courier">

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

הארגומנט של תכונת COLOR הוא ייצוג הקסדצימלי של קוד הצבע (רכיבים אדומים, ירוקים וכחולים, המכונים רכיבי RGB). התוכנית הבאה מדגימה ניהול גופנים:


<НЕАD><ТIТLЕ>התקנת פונטים

<Р>גופן אריה ABVGDEZZHIK
<Р>גופן שליח ABVGDEZZHIK
<Р>גופן SYMBOL ABVGDEZZHIK


אורז. 651. שימוש בגופנים שונים

שימו לב שבתג אתה יכול להשתמש בחלק או בכל התכונות האפשריות שלו. לדוגמה:

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


<НЕАD><Т1ТLЕ>אינדקסים/HEAD>

<НЗ>דוגמה לשימוש באינדקסים
<Р>(5+x 2)x+3

א 1+א 2+ א 3
<Р>הערות שוליים 2


אורז. 832. שימוש בכתבי עילית וכתובות משנה

בנוסף לאלו שנדונו לעיל, ישנם תגי עיצוב טקסט נוספים:

  • - הקצאת כתובות דוא"ל, כתובות דוארו
    מספרי טלפון;
  • <СIТЕ> - הדגשת ציטוטים;
  • , - הקלטת טקסטים של תוכניות, קבועים סמליים;
  • - הזנת טקסטים מהמקלדת.

שלושת הסגנונות האחרונים משתמשים בגופן מונו-רווח (בדרך כלל Courier). לדוגמה, האותיות I ו-Ж בגופן מונוספייס תופסות את אותו רווח. השימוש בגופנים מונו-רווחים נובע מהקלות שבה ניתן ליישר טקסט באמצעות תווי רווח.
נציין נקודה נוספת. תגי בקרת גופנים, כמו תגי סגנון לוגי, יכולים לכלול את התכונה TITLE= "מחרוזת", המאפשר לך לצרף הסבר כלים לטקסט בתוך תג זה. טיעון תכונה כותרתהוא מחרוזת הרמז. כאשר אתה מרחף עם העכבר מעל מילה או ביטוי מודגשים, תיאור כלים יופיע ליד המצביע. באמצעות טכניקה זו ניתן לפענח קיצורים ולספק הסברים והמלצות נוספים למשתמש.



מאמרים דומים
סוגים
  • שאלות נפוצות
  • השוואה
  • מפתח חינם
  • תצוגה מקדימה טכנית
  • חֲדָשׁוֹת
מאמרים פופולריים
מאמרים חדשים