בעיה מוזרה עם העברית... למה זה לא עובד??

מנסה לבנות אתר · 17/4/17

בעיה מוזרה עם העברית... למה זה לא עובד??

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

כדי שתוכלו לראות בעצמכם ולהשוות בין 2 הקבצים העליתי אותם לאתר שיתוף קבצים, אשמח אם תוכלו להוריד את קובץ ה Zip, לפרוש אותו לתוך תיקייה ריקה ולבדוק מה ההבדל בין שני הקבצים.

בכל מקרה הנה הקוד, אבל כאמור את אותו הקוד גם בקובץ התקין וגם בקובץ הלא תקין (כשאני פותח אותם דרך Notepad של חלונות 7, או דרך ++Notepad).

קוד:

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>Hebrew Testing</title>
    <style type="text/css">
        html { direction: rtl; }
        body {
            font-family: Ariel, David;
            font-size: 20px;
        }
    </style> 
</head>

<body>
עברית 123 בדיקה
</body>
</html>

מנסה לבנות אתר · 17/4/17

אופס שכחתי, הקישור להורדת הקובץ

נמצא כאן.

מנסה לבנות אתר · 17/4/17

אופס שכחתי, הקישור להורדת הקובץ

נמצא כאן.

FreeSoft · 17/4/17

אצלי זה תקין

בפיירפוקס ובכרומיום. כנראה בעית קידוד מקומית בדפדפן שלך.

אתה מודע לזה שאתה דוחק למטה שרשורים אחרים עם ההצפות שלך?

מנסה לבנות אתר · 17/4/17

סליחה לא התכוונתי להציף

אתה יכול לשרשר את זה אולי לאחד השרשורים הקודמים?

בכל מקרה הבעיה נפתרה... כששמרתי את הקובץ הייתי צריך לשמור אותו (Save as...) עם קידוד UTF-8. ולגבי ההערה שלך, זו לא יכולה להיות בעיית קידוד בדפדפן המקומי כי כמו שאמרתי קודם דרך אותו דפדפן קובץ אחד הציג עברית תקינה וקובץ שני הציג עברית משובשת למרות שהקוד בשניהם נראה זהה!

מנסה לבנות אתר · 19/4/17

מרגיז, שוב בעיה מוזרה עם תצוגה של פונטים בעברית...

שוב תופעות מוזרות ומרגיזות עם פונטים...

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

דבר מעניין בקשר לפונט "קמבריה", דרך צייר של חלונות אני כן מצליח לכתוב עברית בעזרת הפונט הזה:
<<< ראו תמונה מספר 1 >>>

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

זה מה שאני רואה בדפדפן כרום:
<<< ראו תמונה מספר 2 >>>

והנה הקוד עצמו:

קוד:

 <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Hebrew Testing</title>
    <style type="text/css">
        html { direction: rtl; }
        p { margin: 20; border: 1px solid black; }
        #A {
            font-family: David;
            font-size: 50px;
            font-weight: bold;
        }
        #B {
            font-family: Ariel;
            font-size: 50px;
            font-weight: bold;
        }
        #C {
            font-family: Aharoni;
            font-size: 50px;
            font-weight: bold;
        #D {
            font-family: Cambria;
            font-size: 50px;
            font-weight: bold;
        }
    </style> 
</head>
<body>
<p id="A">א, ב, ג, ד, ה, ו, ז, ח, ט</p>
<p id="B">א, ב, ג, ד, ה, ו, ז, ח, ט</p>
<p id="C">א, ב, ג, ד, ה, ו, ז, ח, ט</p>
<p id="D">א, ב, ג, ד, ה, ו, ז, ח, ט</p>
</body>
</html>

מה דעתכם? יש איזה כיוון מה יכולה להיות הבעיה?
דרך אגב כשאני מסתכל בתיקיית הפונטים של ה Windows (חלונות 7) זה מה שאני רואה:
<<< ראו תמונה מספר 3 >>>

בהתאם לכך ניסיתי מספר קומבינציות כמו למשל:

קוד:

font-family: "Cambria.Cambria Bold";
font-family: "Cambria.Cambria-Bold";
font-family: "Cambria Bold";

אבל גם זה לא עובד

שאלה צדדית נוספת (פחות חשובה) אם אני מנסה לשנות בקוד את הערך של margin מ 20 לערך אחר (למשל 50, או 70) אין שום שינוי בדפדפן, מדוע?

אשמח לעזרתכם בפתרון התעלומה, תודה מראש.

מנסה לבנות אתר · 19/4/17

תמונה מספר 1

מנסה לבנות אתר · 19/4/17

תמונה מספר 2

מנסה לבנות אתר · 19/4/17

תמונה מספר 3

FreeSoft · 19/4/17

מוזר שאתה מצפה שזה יעבוד

מאיפה אתה רוצה שהוא יקרא לו אם לא הגדרת אותו?
אני יוצא מנקודת הנחה שזה לא פונט ברשת אלא במכונה שלך. קרא על איך
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
אחרי שתגדיר את ה
@font-face
כדאי שתשנה טיפה גם בקוד שהצגת. משהו כזה:
font-family: Cambria,Georgia,serif;

מנסה לבנות אתר · 19/4/17

לא כל כך הבנתי...

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

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_font-family

אז מאיפה הייתי אמור לנחש שצריך להוסיף עוד משהו?

בכל מקרה הקוד רץ בינתיים מקומית במחשב שלי, אבל בעתיד אני אעלה את הדף הזה לאינטרנט, ואז מה? זה עדיין ירוץ עם אותה הגדרה של font-face שמפנה לקובץ אצלי במחשב? לא נשמע הגיוני...

בקיצור, זו ההגדרה שרשומה אצלי כרגע בקוד:

קוד:

        #D {
            font-family: Cambria;
            font-size: 50px;
            font-weight: bold;
        }

אתה יכול לרשום לי בבקשה את הקוד החדש אחרי התיקון ?

אבל קוד שירוץ טוב גם אצלי במחשב וגם דרך שרת אינטרנט, זה אפשרי?

או שלכל אחד צריך לרשום הגדרה אחרת?

FreeSoft · 19/4/17

כשאתה משתמש בפונט

שיש אותו "טבעי" בדפדפן אז הוא מכיר אותו ויציג אותו. כשאתה לא משתמש בפונט שכזה אתה צריך לפעול אחרת. כל מה שאכתוב מכאן מתיחס לדרך שאתה מבקש ליישם ואין בה משום הסכמה שלי איתה....
בדוגמה הזו נזרוק את הפונט בספריית השורש של האתר.( אם כי עדיף לפתוח תיקייה בשם fonts ולתוכה להעתיק את הפונט. )
מניח שמדובר ב ttf ואם לא אז תשנה את הסיומת בקוד בהתאם ל woff.woff2,svg,eot וכו'

קוד:

@font-face {
    font-family: Cambria;
    src: url(Cambria.ttf);
}

עכשיו הדפדפן שלך יודע לאן לגשת ויוכל להציג את הפונט בהתאם לקוד.

קוד:

font-family: Cambria,Georgia,serif;

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

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

מנסה לבנות אתר · 19/4/17

תודה רבה רבה, זה הרבה יותר ברור עכשיו

מנסה לבנות אתר · 19/4/17

דרך אגב

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

2. כשאני משתמש בשיטה הזו, האם הדפדפן תמיד יפנה לקובץ של הפונט? או שרק במקרה והפונט לא קיים בדפדפן?

FreeSoft · 19/4/17

אתה יכול לראות אותם

בפיירפוקס :
edit - preferences - content - font&colors
בחלזונות אני חושב שבמקום ב edit תמצא את זה בtools או בלשונית דומה.
בכרומיום:
settings - web content (במצב מתקדם) אני מניח שזה באותו מקום גם בכרום
ב IE לשמחתי אין לי מושג
שים לב שאם התקנת פונט ידנית אז הוא גם יופיע ברשימות האלו אז קח את זה בחשבון.

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

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

מנסה לבנות אתר · 19/4/17

תודה, אבל מה זה אומר פונטים של גוגל?

1. האם אלו פונטים שקיימים ברשת אונליין והדפדפן פשוט פונה אליהם ומשתמש בהם?

2. איך נראית ההגדרה של הפונטים האלו ב CSS ?

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

FreeSoft · 20/4/17

קיבלת קישור לשם בשרשור הקודם

קוד:

<style>
@import url('[URL]https://fonts.googleapis.com/css?family=Arimo[/URL]');
</style>

קוד:

    font-family: 'Arimo', sans-serif;

מנסה לבנות אתר · 20/4/17

תודה, האם דוגמת הקוד השנייה שרשמת

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

מנסה לבנות אתר · 19/4/17

ומה זו התוספת שהוספת: "Georgia,serif;", בשביל מה צריך את זה?

מנסה לבנות אתר · 20/4/17

האם יש דרך לשנות את גודל הטקסט בצורה דינמית דרך CSS ?

האם יש דרך לאפשר למשתמש להגדיל ולהקטין את הפונטים (הטקסט) בצורה דינמית דרך כפתורי פלוס/מינוס שיוצגו בדף, ובעזרת CSS בלבד בלי Java Script וכאלה?

בעיה מוזרה עם העברית... למה זה לא עובד??

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member