CSS를 통해 'semi-bold'글꼴을 설정하려면 어떻게해야합니까? 글꼴 두께 600은 Photoshop 파일에서 볼 수있는 반 굵게 표시되지 않습니다.
저는 Photoshop에서 XHTML로 변환하고 웹 사이트 디자이너는 포토샵 파일에서보기 좋은 Myriad Pro Semi-bold 글꼴을 사용했지만 CSS에서 semi-bold 옵션을 시도하면 내 목적에 비해 너무 굵은 일반 굵은 글꼴. HTML과 CSS에서 더 멋지게 보이는 반 굵은 글꼴을 얻을 수있는 방법이 있습니까? 아니면 'font-weight : 600;'만 붙어 있습니까?
실용적인 방법은 다음 font-family과 같이 세미 볼드 버전의 특정 이름 인 값 으로 설정 하는 것입니다.
font-family: "Myriad pro Semibold"
그게 이름이라면. (개인적으로 저는 Internet Explorer에서 실행되는 자체 글꼴 목록 도구 를 사용하여 CSS에서 사용할 수있는 이름으로 시스템의 글꼴을 확인합니다.)
이 접근 방식에서는 font-weight필요하지 않습니다 (설정하지 않는 것이 좋습니다).
웹 브라우저는 책에서 글꼴 두께를 구현하는 데 열악했습니다. 볼드체를 제외하고는 특정 두께 버전을 찾을 수 없습니다. 해결 방법은 글꼴 패밀리 이름에 정보를 포함하는 것입니다. 비록 이것이 작동하는 방식이 아니더라도 말입니다.
Windows 시스템에서 다른 글꼴 두께 버전으로 종종 존재하는 Segoe UI로 테스트 한 결과, 논리적 접근 방식 (글꼴 계열 이름 Segoe UI 및 다른 font-weight값 사용) 을 사용할 때 Internet Explorer 9에서 적절한 버전을 선택하도록 만들 수 있었지만 Firefox 9 및 Chrome 16에서 실패했습니다 (일반적이고 굵은 작업 만 해당). 예를 들어 이러한 모든 브라우저에서 설정이 font-family: Segoe UI Light정상적으로 작동합니다.
CSS에서 font-weight속성에 대한 값 : normal기본값은 숫자 값 400 및 bold700입니다.
다른 가중치를 지정하려면 숫자 값을 제공해야합니다. 이 숫자 값 은 사용중인 글꼴 모음에 대해 지원되어야합니다 .
예를 들어 다음과 같이 반 굵게 정의합니다.
font-weight: 600;
위의 가중치로로드 된 'Open Sans'글꼴 패밀리를 사용 하는 JSFiddle 입니다.
나에게 다음은 잘 작동합니다. 그냥 추가하세요. 요구 사항에 따라 편집 할 수 있습니다. 이것은 내가 사용하는 좋은 속임수입니다.
text-shadow : 0 0 0 #your-font-color;
font-family : 'Open Sans'; 글꼴 두께 : 600; 다른 글꼴 모음으로 변경하는 것이 중요합니다.
2016 년 중반까지 Chromium 엔진 (v53)은 3 가지 강조 스타일 만 지원합니다.
일반 텍스트, 굵게 및 매우 굵게 ...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
로드시 필요한 가중치를 지정하여 글꼴 선택
글꼴 군은 몇 가지 다른 글꼴로 구성됩니다.
예를 들어, 매우 굵은 글꼴은 다른 글꼴을 선택하기 때문에 Photoshop에서 글꼴이 상당히 다르게 보입니다 . 이탤릭체에도 동일하게 적용되며 실제로는 매우 다르게 보일 수 있습니다. font-weight:800또는 설정 font-style:italic 하면 웹 브라우저가 패밀리 의 일반 글꼴 을 두껍게하거나 기울이기 위해 최선의 노력을 기울일 수 있습니다 .
당신은 글꼴 - 가족을로드하는 경우에도, 당신은 있어야 당신이 필요로하는 무게와 스타일을 지정하는 일부 웹 브라우저는 당신이 가족에서 다른 글꼴을 선택할 수 있도록 font-weight하고 font-style.
예
이 예제는 Open Sans 글꼴 패밀리에서 light, normal, normal italic, bold 및 extra-bold 글꼴을 지정합니다.
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>참고
(쿼라 경고, 허용되지 않는 경우 제거하십시오.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
ReferenceURL : https://stackoverflow.com/questions/8735872/how-do-i-set-semi-bold-font-via-css-font-weight-of-600-doesnt-make-it-look-l
'IT Share you' 카테고리의 다른 글
| 사용자가 앱 내에서 최신 앱 버전을 확인하도록 허용하는 방법은 무엇입니까? (0) | 2021.01.10 |
|---|---|
| 핵심 텍스트-NSAttributedString 줄 높이가 맞습니까? (0) | 2021.01.10 |
| C ++에서 조합 생성 (0) | 2021.01.10 |
| US-ASCII에서 UTF-8 (iconv)로 강제 인코딩 (0) | 2021.01.10 |
| 이미 인스턴스화 된 객체에 속성을 추가 할 수있는 이유는 무엇입니까? (0) | 2021.01.10 |