Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

UX Design mit Axure 8 Grundkurs

Webfonts in Axure verwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie in diesem Video, wie man Webfonts in Axure-Prototypen nutzt und definiert.
03:41

Transkript

In diesem Video werde ich Ihnen zeigen, wie Sie Web Fonts in Ihre Prototypen einbinden können. Web Fonts sind Schriftarten, die Online verfügbar sind und die Sie in Ihre Webseiten und damit auch in Ihre Axure Prototypen einbinden können. Wenn Sie Web Fonts in Ihren Prototypen verwenden wollen, brauchen Sie als erstes den Link zu einem Web Font. Ein Anbieter von kostenlosen Web Fonts ist zum Beispiel Google. Angenommen ich möchte die roboto mono in meinem Prototyp verwenden. Dafür suche ich oft Google Fonts nach der Schriftart, füge sie meiner Sammlung hinzu und drücke den benutzen Link. Hier liefert Google mir den Link, die ich normalerweise in eine Website einbinden muss. Diesen kopiere ich mit Command-C und gehe zurück zu Axure. Unter Publish Generate HTML File befindet sich ein Eintrag Web Fonts. Hier können Sie Web Fonts einbinden, drücken Sie plus, benennen Sie Ihren Font zum Beispiel roboto mono und fügen Sie erst einmal den kompletten Eintrag von Google Fonts hinzu. Jedoch wird hier nur der Link zu der eigentlichen CSS-Datei benötigt. Das heißt, ich kann die HTML-Definition am Anfang und am Ende entfernen und den Dialog wieder schließen. Anschließend selektiere ich den Text und gebe den Namen des Web Fonts in diesem Fall roboto mono in die Fontauswahl ein. Da der Font nur Online und nicht Offline verfügbar ist, bitte ihn nur in der HTML-Ansicht angezeigt werden. Schaue ich mir jetzt meinen Prototypen an. Sehen Sie, dass Axure dem Web Font verwendet. Falls Sie ein Web Font umfangreicher nutzen wollen und nicht jedes Mal von Hand den Namen Ihres Web Fonts eingeben wollen, bietet Axure Ihnen die Möglichkeit einen installierten Font durch einen Web Font zu ersetzen. Auch diese Funktionalität wird wieder nur in Ihren HTML-Prototypen, also im Preview-Mode oder im fertigen HTML-Code funktionieren. Wählen Sie dazu einen bestehenen Font aus, ich nehme zum Beispiel Baghdad, kopieren Sie sich den Namen und öffnen Sie erneut den Generate HTML File Dialog unter der Kategorie Web Fonts, wo wir eben roboto mono definiert haben. Finden Sie den Eintrag Font Mappings dort können Sie einen bestehenen Font durch einen Web Font ersetzen lassen. Fügen Sie einen neuen Eintrag hinzu, wählen Sie den installierten Font aus und tragen Sie den Namen des Web Fonts in das Eingabefeld ein. Im Preview-Modus sehen Sie, dass roboto mono nun verwendet wird, obwohl wir hier Baghdad ausgewählt haben. Auf diese Weise können Sie Baghdad auf alle Ihren Seiten verwenden und diesen dann durch roboto mono ersetzen lassen. Abschließend noch eine Anmerkung, wählen Sie einen installierten Font aus, der einigermaßen vergleichbar in der Laufweite und der Buchstabenhöhe ist. Anderenfalls kann das passieren, dass hier Layout nicht mehr funktioniert, da Sie Ihren Prototypen mit einer anderen Laufweite geplant haben.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!