Как заставить Google Font работать внутри встроенного SVG? - PullRequest
Новая
       11

Как заставить Google Font работать внутри встроенного SVG?

0 голосов
/ 22 марта 2019

Вот очень упрощенная версия моего HTML-документа. 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div style=" width:256px; height:256px; margin:20px auto; ">

		<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
			<style type="text/css"> /*internal CSS of the inline SVG*/
				/* <![CDATA[ */
				@font-face {
					font-family: "M PLUS 1p";
					src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
				}
				/* ]]> */
			</style>

			<a xlink:href="#">
				<circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
				<text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
			</a>
		</svg>

	</div>

</body>
</html>

В частности, я заинтересован в этой части: 

@font-face {
  font-family: "M PLUS 1p";
  src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
}

... и эта часть: 

font-family="M PLUS 1p"

Отображает «1» со шрифтом браузера по умолчанию и выглядит так:

enter image description here

Выше снимок экрана с Firefox

Как выглядит символ «1» шрифта Mplus 1p на самом деле выглядит так:

enter image description here

Выше приведен скриншот из TextEdit

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

@import url('https://fonts.googleapis.com/css?family=M PLUS 1p');

^ Это не сработало.

Другой ответ представляется более разумным подходом, поскольку font-family можно легко определить и использовать повторно.

Я использую ссылку, предоставленную Google, но она не работает:

https://fonts.googleapis.com/css?family=M+PLUS+1p

Видя, что URL Google заменяет пробелы на + Я подумал, что может сработать следующее:

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

Но это тоже не сработало. Вот мои самые последние усилия: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div style=" width:256px; height:256px; margin:20px auto; ">

		<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
			<defs>
				<style type="text/css"> /*internal CSS of the inline SVG*/
							/* <![CDATA[ */
							@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400');
							/* ]]> */
				</style>
			</defs>

			<a xlink:href="#">
				<circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
				<text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
			</a>
		</svg>

	</div>

</body>
</html>

Вероятно, дело в одной синтаксической проблеме, которая отбрасывает все это, но я не смог ее определить.

1 Ответ

1 голос
/ 22 марта 2019

Правильный способ - использовать @import url('https://fonts.googleapis.com/css?family=M PLUS 1p'); и установить font-family в css тоже 

text {
   font-family: 'M PLUS 1p';
}

Inline font-family просто не работает. Я не уверен, что это действительное свойство или нет 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div style=" width:256px; height:256px; margin:20px auto; ">

    <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
			<style type="text/css"> 
        @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
        text {
          font-family: 'M PLUS 1p';
        }
			</style>

			<a xlink:href="#">
				<circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
				<text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
			</a>
		</svg>

  </div>

</body>

</html>
...