PSD-Schriftarten und HTML-Seitenschriftarten

Der Designer erstellt den HTML-Code nicht mit denselben Schriftarten, dh die Fettschrift verschwindet und die Schriftart sieht nicht ähnlich aus wie in der PSD, was bedeutet, dass die Qualität zu schlecht ist.
...
dies ist nicht möglich, dh die gleiche Schriftgröße, Fettschrift kann während der Konvertierung nicht im HTML erreicht werden
...
Können Sie bitte angeben, ob es wirklich wahr ist?

Dies ist eine ziemlich genaue Aussage. Es ist unmöglich, dass Photoshop-Text genauso aussieht wie Text, der vom Betriebssystem gerendert wird. Es gibt detailliertere Informationen in dieser Antwort , aber um zusammenzufassen: Photoshop hat mehrere verschiedene Anti-Aliasing-Optionen, und keine dieser Optionen ist mit der Schriftglättung Ihres Betriebssystems identisch.

Hier ist zum Beispiel ein Vergleich von 4 Schriftarten, die Photoshops "scharfes" AA mit einem HTML-Rendering verwenden, das Windows ClearType verwendet (Schriftgröße in Photoshop und CSS auf 12pt eingestellt):

Mit einigen manuellen Optimierungen kann ein Designer das HTML-CSS der Photoshop-Ausgabe näher bringen, aber das Konvertieren einer PSD in HTML ist nicht so einfach wie das wörtliche Kopieren von Schrifteinstellungen. Aus diesem Grund sind die Ergebnisse immer eine Interpretation des Designs und keine Pixel-für-Pixel-Wiederherstellung.

Wie Lauren und andere bereits erwähnt haben, ist es Teil der Aufgabe des Designers, dies klar zu erklären, damit der Kunde keine unrealistischen Erwartungen hegt.

Photoshop und HTML sind zwei verschiedene Medien. Sie werden und sollten niemals visuell bis auf den Pixel übereinstimmen.

Tatsächlich ist der Prozess „diese PSD in eine Webseite umwandeln“ eine ziemlich antiquierte Methode. Es ist kein praktischer Weg mehr, Dinge zu tun.

Um Ihre Frage zu beantworten: Sie werden die Textwiedergabe in PhotoShop niemals so replizieren, dass sie mit der Textwiedergabe im Browser übereinstimmt. Es gibt viele Variablen:

• Schriften. Das PSD verwendet möglicherweise Schriftarten, die nicht einmal auf dem Computer des Endbenutzers verfügbar sind. Sie müssten die Schriftarten in Web-Font-Formate konvertieren (sofern die Lizenz dies zulässt) und dann CSS verwenden, um sie zu deklarieren.

• Schriftgröße. Sie können eine Schriftgröße nur in HTML/CSS „vorschlagen“. Selbst dann kann es von Bildschirm zu Bildschirm, System zu System, Endbenutzerpräferenz zu Endbenutzerpräferenz variieren

• Schriftwiedergabe. PhotoShop verwendet in der Regel benutzerdefinierte Methoden zur Schriftglättung, um den Text wiederzugeben. Diese unterscheiden sich alle erheblich von den Schriftglättungsmethoden, die der Browser und/oder das Betriebssystem verwenden, um Schriftarten im Browser darzustellen. In der Regel sehen Schriftarten in PhotoShop etwas fetter aus als im Browser.

CSS3 ermöglicht die Verwendung von @font-faceherunterladbaren Schriftarten. Wenn die relevanten Schriftarten für die Webnutzung lizenziert werden können, kann die Webseite genau das verwenden, was der Kunde möchte. Ich glaube nicht, dass es noch vollständig browserübergreifend ist, aber es gibt Methoden, die es ermöglichen, dass es auf allen Browserfamilien funktioniert.

Die Größe hängt von einer Reihe von Faktoren ab, einschließlich der Bildschirmauflösung und der Browsereinstellungen. Eine richtig gestaltete Webseite ermöglicht es dem Benutzer, die Schriftgröße in seinem eigenen Browser festzulegen. Obwohl der HTML-Designer mit den Standardeinstellungen des Browsers alles richtig aussehen lässt, gibt es keine Garantie dafür, dass es überall gleich aussieht.

Aus meiner Erfahrung ändern einige Designer einfach die Größe des Textes wie andere Objekte. Daher kann der Text anders aussehen, da er keine richtige Größe hat (10px, 12px..).

Sie können also die Größe dieses Textes fast näher festlegen, aber es ist die Aufgabe Ihres Kunden, ihn zu übernehmen

Es ist die Aufgabe desjenigen, der Kontakt mit dem Kunden hat, die Kundenerwartungen zu managen.

Textkörper, die in HTML festgelegt sind, stimmen nicht mit einem Photoshop-Dokument überein und werden dies auch niemals tun. Das sind zwei verschiedene Tiere. Als Teil eines Bildes erstellte Kopien stammen aus der PSD und sehen daher auf der Website genauso aus.

Text kann sicherlich fett sein, also bin ich mir nicht sicher, warum das nicht passiert. Verwendet der Designer in der PSD reine Web-Fonts? Wenn der Designer dem Kunden die Komposition präsentiert, erklärt der Designer: „Dies ist nur eine Dummy-Kopie, damit Sie sich ein Bild davon machen können, wie sie aussehen wird. Die Website wird nicht genau mit der Textkopie übereinstimmen“?

Wenn der Designer eine Schriftart verwendet, die die Website nicht darstellen kann, ist das die Schuld des Designers, und der Designer sollte die Schuld nicht den HTML-Programmierern zuschieben. Wenn der Kunde Palatino verlangt und nicht versteht, dass die Website Times anzeigen wird, ist das die Schuld dessen, der dem Kunden gesagt hat, dass er Palatino haben könnte.

Es klingt möglich – die gleichen HTML-Tags werden in verschiedenen Browsern und auf verschiedenen Betriebssystemen usw. unterschiedlich angezeigt. Vielleicht sollten sich die Entwickler und die Designer zusammensetzen, um zu verstehen, was die Schriftartbeschränkungen von Standard und Safe sind (in Bezug auf Verfügbarkeit und gleiches Aussehen). browser- und betriebssystemübergreifend) zu verwendende Schriftarten.

Wenn Sie möchten, dass die Seite genau wie die PSD aussieht, müssen Sie wahrscheinlich Bilder verwenden. Aber das ist keine gute Idee. Verwenden Sie lieber die Beschränkungen von HTML als Designrichtlinie.

Bearbeiten: Dies geht übrigens über Schriftarten hinaus, allgemeine Steuerelemente wie Schaltflächen, Optionsfelder usw. sehen auch in verschiedenen Browsern unterschiedlich aus. Sie sollten sich nicht zu viele Gedanken über geringfügige Änderungen im Aussehen der Steuerelemente und Schriftarten einer Website machen, solange sie in allen Browsern, Versionen und Betriebssystemen usw. gut aussieht ...

Wenn Sie Nicht-Web-Schriftarten im Design haben und das ursprüngliche Aussehen beibehalten möchten, ohne Bilder zu verwenden, können Sie eine der folgenden Alternativen wählen.

sIFR
Shaun Inman Flash Replacement ist eine zuverlässige Technik zur Implementierung von Nicht-Web-Fonts, indem sie mit Hilfe von JavaScript durch Flash-Objekte ersetzt werden. Es ermöglicht die Verwendung von Nicht-Web-Schriftarten auf der Seite. Dies geschieht ohne die Verwendung von Bildern und ohne die Zugänglichkeit für Suchmaschinen und andere Browser zu beeinträchtigen, die JavaScript nicht aktiviert oder Bilder deaktiviert haben (wie es bei Mobiltelefonen häufig der Fall ist). Wenn entweder Flash oder JavaScript in einem bestimmten Browser deaktiviert ist, bleiben die sIFRed-Objekte textbasiert.

Cufon
Die Cufon-Technik ist eine großartige Option für Nicht-Web-Fonts. Cufon bietet Textersetzung mit Canvas und VML mithilfe von JavaScript, arbeitet nativ mit allen Browsern und behält das schöne Aussehen des Textes bei. Es ist keine Unterstützung von Flash-Objekten oder -Bildern erforderlich, damit Cufon funktioniert.

font-face
Die Schriftart funktioniert sehr gut mit Nicht-Web-Fonts. Die Computer, die keine Schriftart haben, können sie herunterladen und unterwegs verwenden. Alles, was wir brauchen, ist die Schriftdatei im .otf-Format.