Rumah hujung hadapan web tutorial css Perbincangan mendalam tentang elemen fon dalam CSS_CSS/HTML

Perbincangan mendalam tentang elemen fon dalam CSS_CSS/HTML

May 16, 2016 pm 12:10 PM

字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。


   中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了。




Perbincangan mendalam tentang elemen fon dalam CSS_CSS/HTML

Als chinesischer Leser akzeptiere ich normalerweise die quadratische Form als Leseeinheit. Tatsächlich ermüdet dies die Augen. Beim Lesen folgen Ihre Augen tatsächlich der Form der gesamten Textzeile. . Schauen Sie sich dieses Beispiel an.
  JETZT HABE ICH VERSUCHT, MIT DIR ZU SPRECHEN UND VERSTÄNDLICH ZU MACHEN
  Jetzt habe ich versucht, mit dir zu reden und dir verständlich zu machen
  Welche Zeile ist leichter zu lesen?
Die erste Zeile ähnelt in gewisser Weise der Situation im Chinesischen. Der Unterschied besteht darin, dass jedes chinesische Wort wie ein Gemälde ist und seine Änderungen viel umfangreicher sind als die 26 englischen Buchstaben Es gibt noch einige Punkte, die beim Entwerfen berücksichtigt werden müssen. Wenn das, was ich gesagt habe, falsch ist, hinterlassen Sie bitte unten eine Nachricht. Diese Inhalte werden als allgemeine Grundsätze dargestellt, wenn ich Typografie unterrichte. Ich sage den Schülern auch: „Der Zweck der Regel besteht darin, die Regel zu brechen.“ Das Gestaltungsprinzip selbst besteht darin, die Regel zu brechen, was auch eine Manifestation der sogenannten Kreativität ist. Das Problem besteht darin, dass Sie die Prinzipien zuerst kennen und in deren Einhaltung üben müssen. Erst wenn Sie mit den Prinzipien vertraut sind, können Sie die Prinzipien brechen und Ihre Kreativität zeigen. Aber durch Ihren genialen Einsatz dieser Prinzipien haben Sie einige kaputt gemacht und gleichzeitig die Teile, die Sie kaputt gemacht haben, kompensiert, was ziemlich philosophisch zu sein scheint.

Ich persönlich denke, die wichtigeren Grundsätze sind (gültig für Englisch):

Bei der Auswahl einer Schriftart sollten Sie den Zweck des Textes berücksichtigen. Handelt es sich um einen Titel oder einen Absatztext?
Im Allgemeinen eignen sich San-Serif-Schriftarten für die Verwendung als Titel, z. B. Arial; Serif-Schriftarten eignen sich für die Verwendung als Absatztext, z. B. Time New Roman. Für das Webdesign gibt es mehrere Schriftarten, die ich sehr empfehle, wie zum Beispiel Verdana, Tahoma und Georgia. Tatsächlich ist eine Schriftart wie Verdana fast zwei Jahre lang für die Bezahlung der Kosten verantwortlich und stellt sie den Benutzern kostenlos zur Verfügung, wenn Sie IE 4 installieren Für die obige Version muss Ihr Computer über diese Schriftart verfügen, sodass Sie sich keine Gedanken darüber machen müssen, ob der Benutzer über diese Schriftart verfügt. Es wurde entwickelt, um die Probleme zu berücksichtigen, die bei der Anzeige von Schriftarten auf dem Bildschirm auftreten können, und bietet eine nahezu perfekte Antwort. Das einzige Problem besteht darin, dass seine nahezu Perfektion zu einem Mangel an Individualität in unserer Verwendung führt, weil jeder es nutzt.

Wie groß ist die Schrift?
Im Forum gibt es viele Diskussionen darüber, was besser ist, Pixel oder Point? Ich möchte es hier nicht wiederholen. Es gibt viele verschiedene Einheiten für die Schriftgröße in CSS. Es gibt ungefähr drei Kategorien:
Absolute Größe: mm, cm, in, pt, pc
Relative Größe: em, ex
Relativ zum Gerät: px
Was möglicherweise noch erwähnt werden muss, sind em und ex. Em stellt beispielsweise die Schriftgröße in CSS dar. 1 em Es entspricht 12 pt. Beispiel:
p {
font-size: 10pt;
text-indent: 1em
}
Vielleicht werden Sie sagen, dass ich Text- Einrückung: 10pt, um das Gleiche zu erreichen. Der Effekt ist gut, aber das ist nur unter idealen Umständen der Fall. Wenn der Benutzer der Meinung ist, dass es besser ist, die Schriftgröße seines Browsers auf 14pt einzustellen, geht der von Ihnen entworfene Anteil verloren, also der relative Größe ist für die Skalierbarkeit des Designs der Webseite sehr vorteilhaft.
Ex ist ähnlich wie em, aber nicht dasselbe. Um auf das obige Diagramm zurückzukommen: Die x-Höhe ist für jede Schriftart unterschiedlich. ex definiert die Größe der Schriftart basierend auf der x-Höhe der Schriftart.

Ausrichtung?
Es ist am besten, die Linksausrichtung zu verwenden, insbesondere die Links- und Rechtsausrichtung zu vermeiden, es sei denn, Sie haben einen besonderen Designzweck. Die Änderung auf der rechten Seite dient lediglich der besseren Lesbarkeit ist schädlich für Ihr Sehvermögen. Hilfe, es nutzt Veränderungen, um Ihren Augen zu sagen, dass es Zeit ist, sich zu verpacken.

Zeilenabstand?
Der Zeilenabstand hängt von der Schriftgröße ab. Im Allgemeinen erfordern kleine Schriftgrößen einen größeren Zeilenabstand, um das Lesen zu erleichtern. Wenn es auf der Webseite keine Einstellung für den Zeilenabstand gibt, ist die Lesbarkeit für den Leser schwierig Große Textabsätze sind eine Katastrophe, daher ist es unbedingt erforderlich, die Zeilenhöhe angemessen einzustellen. Im Allgemeinen sollte die Zeilenhöhe im Webdesign das 1,5- bis 2-fache der Schriftgröße betragen. In Word und anderen Textbearbeitungsprogrammen sind im Allgemeinen 120 % der Schriftart als Standardzeilenabstand eingestellt. Die Zeilenhöheneinstellung in CSS wird gleichmäßig aufgeteilt und am oberen und unteren Rand jeder Zeile hinzugefügt. Das heißt, wenn die Zeilenhöhe auf 20 Pixel eingestellt ist, beträgt der Abstand zwischen dem oberen und unteren Rand jeder Zeile 10 Pixel Textzeile.

  Wortabstand und Zeichenabstand?
Ganz besonderer Zweck, für Chinesen sollten diese beiden gleich sein. Diese Einstellung selbst dient dazu, bestimmte Fehler im Schriftdesign zu beheben und die Lesbarkeit von Text zu verbessern.

Ich habe jedes Mal dieses Gefühl, wenn ich eine Kolumne schreibe, desto weniger weiß ich, wie ich sie beenden soll. Bitte hinterlassen Sie eine Nachricht zur Diskussion, ich werfe nur Steine ​​weg.
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Membina aplikasi Ethereum menggunakan redwood.js dan fauna Membina aplikasi Ethereum menggunakan redwood.js dan fauna Mar 28, 2025 am 09:18 AM

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.

Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Apr 02, 2025 pm 06:17 PM

Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.

Sedikit di CI/CD Sedikit di CI/CD Apr 02, 2025 pm 06:21 PM

Saya '

Kad yang disusun dengan kedudukan melekit dan sasaran sass Kad yang disusun dengan kedudukan melekit dan sasaran sass Apr 03, 2025 am 10:30 AM

Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.

Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Apr 02, 2025 am 04:27 AM

Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?

Membandingkan penyemak imbas untuk reka bentuk responsif Membandingkan penyemak imbas untuk reka bentuk responsif Apr 02, 2025 pm 06:25 PM

Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis

Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'? Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'? Apr 05, 2025 pm 05:51 PM

Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...

See all articles