Heim Web-Frontend Bootstrap-Tutorial So ändern Sie die Schriftart von Bootstrap

So ändern Sie die Schriftart von Bootstrap

Jan 18, 2021 am 11:23 AM
bootstrap

bootstrap改字体的方法:1、正常引入bootstrap的css样式;2、将自定义的样式表放到其之后;3、在main.css中第一句加上“body,button, input, select, textarea,h1...”即可。

So ändern Sie die Schriftart von Bootstrap

本教程操作环境:windows7系统,bootstrap2&&bootstrap3版本,Dell G3电脑。

bootstrap修改默认字体,更换为微软雅黑或其他字体的方法

在开发中,使用bootstrap后,中文会一直是默认的宋体,做为一个设计师,是不可忍受的。。。

还是微软雅黑的字体更好看些,而且过度到手机、平板电脑等设备上,字体也不会有太大跳跃。

所以修改bootstrap的默认字体,更换为其他字体,例如:微软雅黑,方法很简单:

正常引入bootstrap的css样式后,记得将自定义的样式表放到其之后,

如:

    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/img/main.css">
Nach dem Login kopieren

在main.css中第一句加上:

body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { font-family: Microsoft YaHei,&#39;宋体&#39; , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
Nach dem Login kopieren

或者其他自定义字体:

@font-face{
            font-family:myFont;
            src:url(&#39;../myFont/SourceHanSansCN-Light.otf&#39;);
        }
body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { font-family:myFont, Microsoft YaHei,&#39;宋体&#39; , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
html,body{
    width: 100%;
    height: 100%;
}
Nach dem Login kopieren

将首选字体替换为微软雅黑,用英文写字体名称兼容性更好,在所有浏览器上都通用,而且兼容bootstrap2.xx版本与最新的bootstrap3版本。

将h1~h6标签写上,是因为在最新的bootstrap3中,对h1~h6单独做了字体设定,而在2.xx版本中则没有,安全起见要覆盖。

追加:不建议使用 * {}选择器,因为在一些其他样式插件、特殊部分会有更好的字体样式设定,用*就会全部覆盖。

相关教程推荐:《bootstrap教程

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Schriftart von Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz Nach 750.000 Runden Einzelkampf zwischen großen Modellen gewann GPT-4 die Meisterschaft und Llama 3 belegte den fünften Platz Apr 23, 2024 pm 03:28 PM

Zu Llama3 wurden neue Testergebnisse veröffentlicht – die große Modellbewertungs-Community LMSYS veröffentlichte eine große Modell-Rangliste, die Llama3 auf dem fünften Platz belegte und mit GPT-4 den ersten Platz in der englischen Kategorie belegte. Das Bild unterscheidet sich von anderen Benchmarks. Diese Liste basiert auf Einzelkämpfen zwischen Modellen, und die Bewerter aus dem gesamten Netzwerk machen ihre eigenen Vorschläge und Bewertungen. Am Ende belegte Llama3 den fünften Platz auf der Liste, gefolgt von drei verschiedenen Versionen von GPT-4 und Claude3 Super Cup Opus. In der englischen Einzelliste überholte Llama3 Claude und punktgleich mit GPT-4. Über dieses Ergebnis war Metas Chefwissenschaftler LeCun sehr erfreut und leitete den Tweet weiter

So verwenden Sie Laui und Bootstrap zusammen So verwenden Sie Laui und Bootstrap zusammen Apr 26, 2024 am 03:51 AM

LayUI und Bootstrap können auf folgende Weise integriert werden: Führen Sie Stile und Skripte direkt ein, Sie müssen jedoch CSS-Überschreibungsregeln anpassen. Verwenden Sie Sass, um Bootstrap-Variablen zu überschreiben. Dies erfordert die Verwendung von Laystrap-Plug-Ins, um die Bootstrap-Stilversion zu kapseln von LayUI-Komponenten; verwenden Sie das Layui Bootstrap-Plugin, das Stilüberschreibungen und reaktionsfähiges Layout automatisch verarbeitet.

Java Kafka: FAQs und Best Practices Java Kafka: FAQs und Best Practices May 08, 2024 pm 09:36 PM

KafkaJava Best Practices und FAQ Timeout beim Erstellen des Producers: Überprüfen Sie die Konfiguration der Verbindungs-, Netzwerk- und Producer-Eigenschaften. Verzögerung oder Fehler beim Konsum: Optimierung der Batchgröße und des Abfrageintervalls, Überprüfung der Effizienz der Verbraucherverarbeitungslogik. Nachrichtenreihenfolge garantieren: Erstellen Sie ein Einzelpartitionsthema, ordnen Sie Schlüssel und Reihenfolge zu und verwenden Sie die geordnete Sendemethode. Optimieren Sie Durchsatz und Latenz: Erhöhen Sie die Anzahl der Partitionen, passen Sie die Stapeleinstellungen an und verwenden Sie Hochgeschwindigkeitsspeicher. Verwalten Sie den Kafka-Cluster: Überwachen Sie die Leistung, bereinigen Sie alte Nachrichten, passen Sie die Anzahl der Partitionen, Replikate und Aufbewahrungsrichtlinien an.

Was ist besser: Laui-Framework oder Bootstrap? Was ist besser: Laui-Framework oder Bootstrap? Apr 26, 2024 am 02:21 AM

Layui und Bootstrap sind zwei beliebte Front-End-Frameworks. Layui ist leichtgewichtig und modular und eignet sich für Mobile-First-Entwicklung und Projekte mit Leistungsanforderungen. Bootstrap ist weit verbreitet, reaktionsschnell und eignet sich für die Entwicklung großer und komplexer Anwendungen. Berücksichtigen Sie bei der Auswahl Kriterien wie Projektgröße, Mobile-Firstness, Anpassbarkeit, unterstützende Community und mehr.

Welcher Zusammenhang besteht zwischen der NIO-Technologie und dem Reaktormuster in Java-Funktionen? Welcher Zusammenhang besteht zwischen der NIO-Technologie und dem Reaktormuster in Java-Funktionen? Apr 30, 2024 pm 01:09 PM

NIO-Technologie und Reaktormodus in Java-Funktionen NIO (nicht blockierende E/A) und Reaktormodus sind wichtige Technologien in der gleichzeitigen Java-Programmierung. In Java-Funktionen werden sie häufig über das Netty-Framework verwendet. NIO-Technologie NIO ist ein nicht blockierendes I/O-Modell. Im Gegensatz zu herkömmlichen blockierenden E/A-Vorgängen blockiert NIO nicht den aufrufenden Thread, sondern benachrichtigt die Anwendung über einen Rückrufmechanismus, wenn der E/A-Vorgang bereit ist. Dadurch können Anwendungen mehrere E/A-Vorgänge gleichzeitig verarbeiten und so die Parallelität verbessern. In Java-Funktionen verwendet NIO normalerweise Klassen im Paket java.nio.channels. Zeigen

So ändern Sie das Laui-Framework in Bootstrap So ändern Sie das Laui-Framework in Bootstrap Apr 26, 2024 am 01:30 AM

Die Konvertierung von LayUI zu Bootstrap umfasst die folgenden Schritte: 1. Importieren Sie die Bootstrap-Bibliothek. 2. Ersetzen Sie die Stile. 4. Passen Sie das Layout an. Erwägen Sie beim Konvertieren die Verwendung eines JavaScript-Frameworks, um den Prozess zu vereinfachen, und achten Sie darauf, Ihren Code zu sichern und alle erforderlichen zusätzlichen Anpassungen vorzunehmen.

Integration und Praxis des PHP-Frontend-Frameworks Integration und Praxis des PHP-Frontend-Frameworks May 01, 2024 am 11:21 AM

Durch die Integration von Bootstrap und Vue.js können Sie den Prozess der Erstellung reaktionsfähiger, wartbarer PHP-Webanwendungen vereinfachen. Bootstrap integrieren: Installieren Sie Bootstrap, laden Sie CSS- und JS-Dateien in Ihre index.php-Datei und verwenden Sie Bootstrap-Komponenten in HTML. Vue.js integrieren: Installieren Sie Vue.js, laden Sie die Vue.js-Datei in die index.php-Datei, erstellen Sie eine Vue-Instanz und mounten Sie sie in Ihren HTML-Code. Praktischer Fall: Verwenden Sie Bootstrap und Vue.js, um ein Formular zu erstellen, das Eingabefelder, Schaltflächen und Vue-Bindungsnachrichten enthält.

Kann Laui mit Bootstrap verwendet werden? Kann Laui mit Bootstrap verwendet werden? Apr 26, 2024 am 02:33 AM

Dürfen. Die gemeinsame Verwendung von Layui und Bootstrap erhöht die Flexibilität, bietet ein reichhaltiges Ökosystem und optimiert die Leistung. Sie müssen jedoch auf Stilkonflikte, Komponentenüberschneidungen und Versionskompatibilität achten. Es wird empfohlen, Layui für die Kernlogik und Bootstrap für das responsive Layout zu verwenden.

See all articles