как сделать так, чтобы текст кнопки в стиле bootstrap выглядел менее смазанным? - PullRequest
Новая
       5

как сделать так, чтобы текст кнопки в стиле bootstrap выглядел менее смазанным?

0 голосов
/ 28 февраля 2020

Я уверен, что это можно улучшить, если вы посмотрите как скрипка js, она выглядит размытой и немного неопрятной sh. какие-либо советы по получению текста острым и более профессиональным, пожалуйста?

Я думаю, @font face для импорта шрифтов, но с laravel -миксом я мог бы добавить куда-нибудь?

https://jsfiddle.net/t9b8ukoz/

.btn-enquiry {
background-color: #C30030;    
height: 50px;
color: #ffffff;
font-family: Helvetica Neue LT Std;
border-width: 0;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

.btn-enquiry-no {
background-color: #ffffff;
border-color: #C30030;   
height: 50px;
color: #c30030;
font-family: Helvetica Neue LT Std;
border-width: 2px;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

<div class="container">
<div class="row">
<div class="col-sm-4">
<button class="button btn-block btn-enquiry">Yes</button>
<button class="button btn-block btn-enquiry-no">No</button>
</div>
</div>  
</div>

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Вы можете использовать URL для импорта шрифтов, таких как: 

@font-face {
   font-family: 'Calibri';
   font-style: italic;
   font-weight: 400;
   src: local('Calibri Italic'), local('Calibri-Italic'), 
   url(https://fonts.gstatic.com/l/font?kit=J7adnpV- 
   BGlaFfdAhLQo6btPMDoTpA&skey=36a3d5758e0e2f58&v=v9) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 
   U+FEFF, U+FFFD;
}
0 голосов
/ 28 февраля 2020

добавил загруженные несколько разных шрифтов в папку / assets / fonts в / resources

, добавьте это в webpack.mix. js

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

Затем добавьте это в мой пользовательский css file 

@font-face {
font-family: 'OpenSansRegular';
src: url('../assets/fonts/OpenSans-Regular-webfont.eot');
src: url('../assets/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('../assets/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../assets/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;}

Когда он компилируется с npm и laravel, микс работает отлично!

...